@shohojdhara/atomix 0.4.8 → 0.4.9

package/dist/forms.js

@@ -55,7 +55,16 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
         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,
@@ -218,6 +227,44 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
         // 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
+            }
         }
     }
 }, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
@@ -296,7 +343,7 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
         // 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;
@@ -466,14 +513,16 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, 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 = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
+    const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
-        // Dynamic import shader utilities
+        // Dynamic import shader utilities with animation support
         Promise.resolve().then((() => shaderUtils)).then((shaderUtils => {
             shaderUtilsRef.current = {
                 ShaderDisplacementGenerator: shaderUtils.ShaderDisplacementGenerator,
@@ -488,7 +537,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
     // Generate shader map with debouncing and caching
     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);
@@ -510,11 +559,9 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                         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());
@@ -546,7 +593,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
         // 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) {
@@ -555,7 +603,37 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 shaderGeneratorRef.current = null;
             }
         };
-    }), [ mode, glassSize, shaderVariant ]);
+    }), [ mode, glassSize, shaderVariant ]), 
+    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
+    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] = useState(null);
     useEffect((() => {
@@ -889,12 +967,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(),
@@ -907,7 +1117,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] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
@@ -921,7 +1133,47 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), targetGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
-    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = 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 = useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
+    /**
+   * Animation loop for time-based effects
+   */
+    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 = useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = useState({
             width: 270,
             height: 69
@@ -980,7 +1232,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         glassRef: glassRef,
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
-    }), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
+    }), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = 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
     useEffect((() => {
         const extractRadius = () => {
@@ -1183,6 +1438,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 = {
@@ -1191,17 +1448,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,
@@ -1292,6 +1549,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,
@@ -1301,1064 +1560,1819 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
 }
 
 /**
- * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
- *
- * Features:
- * - Hardware-accelerated glass effects with SVG filters
- * - Mouse-responsive liquid distortion
- * - Dynamic border-radius extraction from children CSS properties
- * - Automatic light/dark theme detection via overLight prop
- * - Accessibility and performance optimizations
- * - Multiple displacement modes (standard, polar, prominent, shader)
- * - Design token integration for consistent theming
- * - Focus ring support for keyboard navigation
- * - Responsive breakpoints for mobile optimization
- * - Enhanced ARIA attributes for screen readers
- *
- * Design System Compliance:
- * - Uses design tokens for opacity, spacing, and colors
- * - Follows BEM methodology for class naming
- * - Implements focus-ring mixin for accessibility
- * - Supports reduced motion and high contrast preferences
- *
- * @example
- * // Basic usage with dynamic border-radius extraction
- * <AtomixGlass>
- *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Manual border-radius override
- * <AtomixGlass borderRadius={20}>
- *   <div>Content with 20px glass radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Interactive glass with click handler
- * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
- *   <div>Clickable content</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Boolean mode (explicit control)
- * <AtomixGlass overLight={true}>
- *   <div>Content on light background</div>
- * </AtomixGlass>
+ * Default responsive breakpoints configuration
  *
- * @example
- * // OverLight - Auto-detection mode
- * <AtomixGlass overLight="auto">
- *   <div>Content with auto-detected background</div>
- * </AtomixGlass>
+ * 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
  *
- * @example
- * // OverLight - Object config with custom settings
- * <AtomixGlass
- *   overLight={{
- *     threshold: 0.8,
- *     opacity: 0.6,
- *     contrast: 1.8,
- *     brightness: 1.0,
- *     saturationBoost: 1.5
- *   }}
- * >
- *   <div>Content with custom overLight config</div>
- * </AtomixGlass>
+ * Uses Device Memory API and Hardware Concurrency API to classify devices
+ * into performance tiers for automatic quality adjustment.
  *
- * @example
- * // Debug mode for overLight detection
- * <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 = useRef(null), contentRef = 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({
-        glassRef: glassRef,
-        contentRef: contentRef,
-        borderRadius: borderRadius,
-        globalMousePosition: externalGlobalMousePosition,
-        mouseOffset: externalMouseOffset,
-        mouseContainer: mouseContainer,
-        overLight: overLight,
-        reducedMotion: reducedMotion,
-        highContrast: highContrast,
-        withoutEffects: withoutEffects,
-        elasticity: elasticity,
-        onClick: onClick,
-        debugBorderRadius: debugBorderRadius,
-        debugOverLight: debugOverLight,
-        debugPerformance: debugPerformance,
-        children: children,
-        blurAmount: blurAmount,
-        saturation: saturation,
-        withLiquidBlur: withLiquidBlur,
-        padding: padding,
-        style: style,
-        isFixedOrSticky: isFixedOrSticky
-    }), isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
-        if (!isFixedOrSticky) return {};
-        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
-        return {
-            ...p && {
-                position: p
-            },
-            ...void 0 !== t && {
-                top: t
-            },
-            ...void 0 !== l && {
-                left: l
-            },
-            ...void 0 !== r && {
-                right: r
-            },
-            ...void 0 !== b && {
-                bottom: b
-            }
-        };
-    }), [ isFixedOrSticky, restStyle ]);
-    // Calculate base style with transforms
-    // When layout is hoisted to the root, strip those props from the container
-    useMemo((() => {
-        if (isFixedOrSticky) {
-            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
-            return {
-                ...visualStyle,
-                ...!effectiveWithoutEffects && {
-                    transform: transformStyle
-                }
-            };
+ * @returns Performance tier classification
+ */ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+
+var fails$8 = function(exec) {
+    try {
+        return !!exec();
+    } catch (error) {
+        return !0;
+    }
+}, functionBindNative = !fails$8((function() {
+    // eslint-disable-next-line es/no-function-prototype-bind -- safe
+    var test = function() {/* empty */}.bind();
+    // eslint-disable-next-line no-prototype-builtins -- safe
+        return "function" != typeof test || test.hasOwnProperty("prototype");
+})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
+    return function() {
+        return call$5.apply(fn, arguments);
+    };
+}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
+    return it && it.Math === Math && it;
+}, globalThis_1 = 
+// eslint-disable-next-line es/no-global-this -- safe
+check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
+// eslint-disable-next-line no-restricted-globals -- safe
+check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
+// eslint-disable-next-line no-new-func -- fallback
+function() {
+    return this;
+}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
+    return call$4.apply(apply$1, arguments);
+}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
+    return stringSlice(toString$3(it), 8, -1);
+}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
+    // Nashorn bug:
+    //   https://github.com/zloirock/core-js/issues/1128
+    //   https://github.com/zloirock/core-js/issues/1130
+    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
+}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
+    return "function" == typeof argument || argument === documentAll;
+} : function(argument) {
+    return "function" == typeof argument;
+}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty({}, 1, {
+        get: function() {
+            return 7;
         }
-        return {
-            ...restStyle,
-            ...!effectiveWithoutEffects && {
-                transform: transformStyle
-            }
-        };
-    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
-    // Build className with state modifiers
-    const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
-        position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
-        top: isFixedOrSticky ? 0 : restStyle.top || 0,
-        left: isFixedOrSticky ? 0 : restStyle.left || 0
-    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = useMemo((() => {
-        // Keep a reference to positionStyles to avoid unused-variable lint,
-        // but sizing is driven by explicit width/height or measured size.
-        positionStyles.position;
-        const resolveLength = (value, measured) => void 0 !== value ? "number" == typeof value ? `${value}px` : value : measured > 0 ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
-        return {
-            width: resolveLength(effectiveWidth, glassSize.width),
-            height: resolveLength(effectiveHeight, glassSize.height)
-        };
-    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
-        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
-        return {
-            borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
-            borderStop1: Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER),
-            borderStop2: Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER),
-            borderOpacities: [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ],
-            hoverPositions: {
-                hover1: {
-                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
-                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
-                },
-                hover2: {
-                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
-                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
-                },
-                hover3: {
-                    x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
-                    y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
-                }
-            },
-            basePosition: {
-                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
-                y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
-            },
-            mx: mx,
-            my: my,
-            absMx: absMx,
-            absMy: absMy
-        };
-    }), [ mouseOffset.x, mouseOffset.y ]), opacityValues = useMemo((() => {
-        const overLightOpacity = overLightConfig.opacity;
-        return {
-            hover1: isHovered || isActive ? .5 : 0,
-            hover2: isActive ? .5 : 0,
-            hover3: isHovered ? .4 : isActive ? .8 : 0,
-            base: isOverLight ? overLightOpacity || .4 : 0,
-            over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
-        };
-    }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
-        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
-        return {
-            ...void 0 !== customZIndex && {
-                "--atomix-glass-base-z-index": customZIndex
-            },
-            "--atomix-glass-radius": `${effectiveBorderRadius}px`,
-            "--atomix-glass-transform": transformStyle || "none",
-            // Internal decorative layers are positioned relative to the root;
-            "--atomix-glass-position": rootLayoutStyle.position,
-            "--atomix-glass-top": `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
-            "--atomix-glass-left": `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
-            "--atomix-glass-width": adjustedSize.width,
-            "--atomix-glass-height": adjustedSize.height,
-            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
-            "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
-            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-hover-1-opacity": opacityValues.hover1,
-            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
-            "--atomix-glass-hover-2-opacity": opacityValues.hover2,
-            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
-            "--atomix-glass-hover-3-opacity": opacityValues.hover3,
-            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
-            "--atomix-glass-base-opacity": opacityValues.base,
-            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
-            "--atomix-glass-overlay-opacity": opacityValues.over,
-            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
-            "--atomix-glass-overlay-highlight-opacity": opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
-            "--atomix-glass-overlay-highlight-bg": `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
-        };
-    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex, rootLayoutStyle, isFixedOrSticky ]), renderBackgroundLayer = layerType => jsx("div", {
-        className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" ")
-    });
-    // Calculate position and size styles for internal layers
-    // When root is fixed/sticky, internal layers use absolute (relative to root)
-        return jsxs("div", {
-        ...rest,
-        className: componentClassName,
-        style: {
-            ...glassVars
-        },
-        role: role || (onClick ? "button" : void 0),
-        tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
-        "aria-label": ariaLabel,
-        "aria-describedby": ariaDescribedBy,
-        "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
-        "aria-pressed": !(!onClick || !isActive) || !onClick && void 0,
-        onKeyDown: onClick ? handleKeyDown : void 0,
-        children: [ jsx(AtomixGlassContainer, {
-            ref: glassRef,
-            contentRef: contentRef,
-            className: className,
-            style: {
-                ...restStyle,
-                ...!isFixedOrSticky && {
-                    position: "relative"
-                }
-            },
-            borderRadius: effectiveBorderRadius,
-            displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
-            blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
-            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
-            aberrationIntensity: effectiveWithoutEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
-            glassSize: glassSize,
-            padding: padding,
-            mouseOffset: effectiveWithoutEffects ? {
-                x: 0,
-                y: 0
-            } : mouseOffset,
-            globalMousePosition: effectiveWithoutEffects ? {
-                x: 0,
-                y: 0
-            } : globalMousePosition,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            onMouseDown: handleMouseDown,
-            onMouseUp: handleMouseUp,
-            isHovered: isHovered,
-            isActive: isActive,
-            overLight: isOverLight,
-            overLightConfig: {
-                contrast: overLightConfig.contrast,
-                brightness: overLightConfig.brightness,
-                shadowIntensity: overLightConfig.shadowIntensity,
-                borderOpacity: overLightConfig.borderOpacity
-            },
-            onClick: onClick,
-            mode: mode,
-            effectiveWithoutEffects: effectiveWithoutEffects,
-            effectiveReducedMotion: effectiveReducedMotion,
-            shaderVariant: shaderVariant,
-            withLiquidBlur: withLiquidBlur,
-            children: children
-        }), Boolean(onClick) && jsxs(Fragment, {
-            children: [ jsx("div", {
-                className: ATOMIX_GLASS.HOVER_1_CLASS
-            }), jsx("div", {
-                className: ATOMIX_GLASS.HOVER_2_CLASS
-            }), jsx("div", {
-                className: ATOMIX_GLASS.HOVER_3_CLASS
-            }) ]
-        }), renderBackgroundLayer("dark"), renderBackgroundLayer("black"), shouldRenderOverLightLayers && jsxs(Fragment, {
-            children: [ jsx("div", {
-                className: ATOMIX_GLASS.BASE_LAYER_CLASS
-            }), jsx("div", {
-                className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
-            }), jsx("div", {
-                className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS
-            }) ]
-        }), withBorder && jsxs(Fragment, {
-            children: [ jsx("span", {
-                className: ATOMIX_GLASS.BORDER_1_CLASS
-            }), jsx("span", {
-                className: ATOMIX_GLASS.BORDER_2_CLASS
-            }) ]
-        }) ]
-    });
-}
+    })[1];
+})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
+    return call$3.apply(call$3, arguments);
+}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
+    1: 2
+}, 1);
+
+// `Object.prototype.propertyIsEnumerable` method implementation
+// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
+objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
+    var descriptor = getOwnPropertyDescriptor$1(this, V);
+    return !!descriptor && descriptor.enumerable;
+} : $propertyIsEnumerable;
+
+var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
+    return {
+        enumerable: !(1 & bitmap),
+        configurable: !(2 & bitmap),
+        writable: !(4 & bitmap),
+        value: value
+    };
+}, fails$5 = fails$8, classof$3 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
+    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
+    // eslint-disable-next-line no-prototype-builtins -- safe
+    return !$Object$3("z").propertyIsEnumerable(0);
+})) ? function(it) {
+    return "String" === classof$3(it) ? split(it, "") : $Object$3(it);
+} : $Object$3, isNullOrUndefined$2 = function(it) {
+    return null == it;
+}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$3 = function(it) {
+    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
+    return it;
+}, IndexedObject = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
+    return IndexedObject(requireObjectCoercible$2(it));
+}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
+    return "object" == typeof it ? null !== it : isCallable$7(it);
+}, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
+    return isCallable$6(variable) ? variable : void 0;
+}, navigator$1 = globalThis_1.navigator, userAgent$1 = navigator$1 && navigator$1.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
+
+v8 && (
+// in old Chrome, versions of V8 isn't V8 = Chrome / 10
+// but their correct versions are not interesting for us
+version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
+// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
+// so check `userAgent` even if `.v8` exists, but 0
+!version && userAgent && (!(match = userAgent.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent.match(/Chrome\/(\d+)/)) && (version = +match[1]);
+
+var V8_VERSION = version, fails$4 = fails$8, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
+    var symbol = Symbol("symbol detection");
+    // Chrome 38 Symbol has incorrect toString conversion
+    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
+    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
+    // of course, fail.
+        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
+    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
+    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
+})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$1 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
+    return "symbol" == typeof it;
+} : function(it) {
+    var $Symbol = function(namespace, method) {
+        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$a[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$a[namespace] && globalThis$a[namespace][method];
+    }("Symbol");
+    return isCallable$5($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$2(it));
+}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$5 = TypeError, aCallable$2 = function(argument) {
+    if (isCallable$4(argument)) return argument;
+    throw new $TypeError$5(function(argument) {
+        try {
+            return $String$2(argument);
+        } catch (error) {
+            return "Object";
+        }
+    }(argument) + " is not a function");
+}, aCallable$1 = aCallable$2, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$4 = TypeError, sharedStore = {
+    exports: {}
+}, globalThis$6 = globalThis_1, defineProperty = Object.defineProperty, globalThis$5 = globalThis_1, store$1 = sharedStore.exports = globalThis$5["__core-js_shared__"] || function(key, value) {
+    try {
+        defineProperty(globalThis$6, key, {
+            value: value,
+            configurable: !0,
+            writable: !0
+        });
+    } catch (error) {
+        globalThis$6[key] = value;
+    }
+    return value;
+}("__core-js_shared__", {});
+
+/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
+    version: "3.43.0",
+    mode: "pure",
+    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
+    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
+    source: "https://github.com/zloirock/core-js"
+});
+
+var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
+    return hasOwnProperty($Object$1(requireObjectCoercible$1(it)), key);
+}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
+    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
+}, wellKnownSymbol$5 = function(name) {
+    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
+    WellKnownSymbolsStore[name];
+}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
+    if (!isObject$3(input) || isSymbol$1(input)) return input;
+    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$1(func));
+    if (exoticToPrim) {
+        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
+        !isObject$3(result) || isSymbol$1(result)) return result;
+        throw new $TypeError$3("Can't convert object to primitive value");
+    }
+    return void 0 === pref && (pref = "number"), function(input, pref) {
+        var fn, val;
+        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
+        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        throw new $TypeError$4("Can't convert object to primitive value");
+    }(input, pref);
+}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
+    var key = toPrimitive(argument, "string");
+    return isSymbol(key) ? key : key + "";
+}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
+        get: function() {
+            return 7;
+        }
+    }).a;
+    var it;
+})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+
+// `Object.getOwnPropertyDescriptor` method
+// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
+objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
+    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
+        return $getOwnPropertyDescriptor$1(O, P);
+    } catch (error) {/* empty */}
+    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
+};
+
+var fails$2 = fails$8, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
+    var value = data[normalize(feature)];
+    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$2(detection) : !!detection);
+}, normalize = isForced$1.normalize = function(string) {
+    return String(string).replace(replacement, ".").toLowerCase();
+}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable = aCallable$2, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
+        value: 42,
+        writable: !1
+    }).prototype;
+})), isObject$1 = isObject$5, $String$1 = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
+    if (isObject$1(argument)) return argument;
+    throw new $TypeError$2($String$1(argument) + " is not an object");
+}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+
+// `Object.defineProperty` method
+// https://tc39.es/ecma262/#sec-object.defineproperty
+objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
+        var current = $getOwnPropertyDescriptor(O, P);
+        current && current.writable && (O[P] = Attributes.value, Attributes = {
+            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
+            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
+            writable: !1
+        });
+    }
+    return $defineProperty(O, P, Attributes);
+} : $defineProperty : function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
+        return $defineProperty(O, P, Attributes);
+    } catch (error) {/* empty */}
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
+    return "value" in Attributes && (O[P] = Attributes.value), O;
+};
+
+var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
+    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
+} : function(object, key, value) {
+    return object[key] = value, object;
+}, globalThis$2 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+    return aCallable(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
+        return fn.apply(that, arguments);
+    };
+}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
+    var Wrapper = function(a, b, c) {
+        if (this instanceof Wrapper) {
+            switch (arguments.length) {
+              case 0:
+                return new NativeConstructor;
+
+              case 1:
+                return new NativeConstructor(a);
+
+              case 2:
+                return new NativeConstructor(a, b);
+            }
+            return new NativeConstructor(a, b, c);
+        }
+        return apply(NativeConstructor, this, arguments);
+    };
+    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$2 : STATIC ? globalThis$2[TARGET] : globalThis$2[TARGET] && globalThis$2[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$2) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
+}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
+    var n = +x;
+    return (n > 0 ? floor : ceil)(n);
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
+    var argument, len;
+}, createMethod = function(IS_INCLUDES) {
+    return function($this, el, fromIndex) {
+        var O = toIndexedObject($this), length = lengthOfArrayLike(O);
+        if (0 === length) return !IS_INCLUDES && -1;
+        var value, index = function(index, length) {
+            var integer = toIntegerOrInfinity$1(index);
+            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
+        }(fromIndex, length);
+        // Array#includes uses SameValueZero equality algorithm
+        // eslint-disable-next-line no-self-compare -- NaN check
+        if (IS_INCLUDES && el != el) {
+            for (;length > index; ) 
+            // eslint-disable-next-line no-self-compare -- NaN check
+            if ((value = O[index++]) != value) return !0;
+            // Array#indexOf ignores holes, Array#includes - not
+                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
+        return !IS_INCLUDES && -1;
+    };
+}, $includes = [ createMethod(!0), createMethod(!1) ][0];
 
-const Checkbox =  React.memo( forwardRef((({label: label, checked: checked, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass, ...props}, ref) => {
-    // Local ref to handle indeterminate state
-    const localRef = useRef(null);
-    // Merge refs
-        useImperativeHandle(ref, (() => localRef.current)), 
-    // Handle indeterminate
-    useEffect((() => {
-        localRef.current && (localRef.current.indeterminate = Boolean(indeterminate));
-    }), [ indeterminate ]);
-    // Generate classes
-    let validationClass = "";
-    invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid");
-    const checkboxClass = `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${glass ? "c-checkbox--glass" : ""} ${className}`.trim(), inputElement = jsx("input", {
-        ref: localRef,
-        type: "checkbox",
-        className: "c-checkbox__input",
-        checked: checked,
-        onChange: onChange,
-        onClick: onClick,
-        disabled: disabled,
-        required: required,
-        id: id,
-        name: name,
-        value: value,
-        "aria-label": label ? void 0 : ariaLabel,
-        "aria-describedby": ariaDescribedBy,
-        "aria-invalid": invalid,
-        ...props
-    });
-    let content;
-    if (content = id && label ? jsxs("div", {
-        className: checkboxClass,
-        style: style,
-        children: [ inputElement, jsx("label", {
-            className: "c-checkbox__label",
-            htmlFor: id,
-            children: label
-        }) ]
-    }) : label ? jsxs("label", {
-        className: checkboxClass,
-        style: style,
-        children: [ inputElement, jsx("span", {
-            className: "c-checkbox__label",
-            children: label
-        }) ]
-    }) : jsx("div", {
-        className: checkboxClass,
-        style: style,
-        children: inputElement
-    }), glass) {
-        const defaultGlassProps = {
-            displacementScale: 40,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .3,
-            borderRadius: 6,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
-            ...defaultGlassProps,
-            ...glass
-        };
-        return jsx(AtomixGlass, {
-            ...glassProps,
-            children: content
-        });
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+_export({
+    target: "Array",
+    proto: !0,
+    forced: fails$8((function() {
+        // eslint-disable-next-line es/no-array-prototype-includes -- detection
+        return !Array(1).includes();
+    }))
+}, {
+    includes: function(el /* , fromIndex = 0 */) {
+        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
     }
-    return content;
-})));
+});
 
-Checkbox.displayName = "Checkbox";
+var globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$2 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
+    if (pureMethod) return pureMethod;
+    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+}, includes$4 = getBuiltInPrototypeMethod$2("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
 
-/**
- * Form - A component for creating form layouts
- */
-const Form = ({children: children, onSubmit: onSubmit, onReset: onReset, className: className = "", style: style, disabled: disabled = !1, id: id, method: method = "post", encType: encType, noValidate: noValidate = !1, autoComplete: autoComplete = "on"}) => {
-    const {generateFormClass: generateFormClass, handleSubmit: handleSubmit, handleReset: handleReset} = 
-    /**
- * Form state and functionality
- * @param initialProps - Initial form properties
- * @returns Form state and methods
- */
-    function(initialProps) {
-        // Default form properties
-        const defaultProps = {
-            disabled: !1,
-            ...initialProps
-        };
-        /**
-   * Generate form class based on properties
-   * @param props - Form properties
-   * @returns Class string
-   */        return {
-            defaultProps: defaultProps,
-            generateFormClass: props => {
-                const {disabled: disabled = defaultProps.disabled, className: className = ""} = props;
-                return `${FORM_CLASSES_BASE} ${disabled ? FORM_CLASSES_DISABLED : ""} ${className}`.trim();
-            },
-            handleSubmit: handler => event => {
-                event.preventDefault(), !defaultProps.disabled && handler && handler(event);
-            },
-            handleReset: handler => event => {
-                !defaultProps.disabled && handler && handler(event);
-            }
-        };
-    }({
-        disabled: disabled
-    }), formClass = generateFormClass({
-        className: className,
-        disabled: disabled
-    });
-    return jsx("form", {
-        id: id,
-        className: formClass,
-        style: style,
-        onSubmit: handleSubmit(onSubmit),
-        onReset: handleReset(onReset),
-        method: method,
-        encType: encType,
-        noValidate: noValidate,
-        autoComplete: autoComplete,
-        children: children
-    });
-};
+test[wellKnownSymbol$5("toStringTag")] = "z";
 
-Form.displayName = "Form";
+var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
+    return arguments;
+}()), classof = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+    var O, tag, result;
+    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
+        try {
+            return it[key];
+        } catch (error) {/* empty */}
+    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
+}, $String = String, MATCH = wellKnownSymbol$5("match"), $ = _export, notARegExp = function(it) {
+    if (function(it) {
+        var isRegExp;
+        return isObject(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$2(it));
+    }(it)) throw new $TypeError("The method doesn't accept regular expressions");
+    return it;
+}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
+    if ("Symbol" === classof(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
+    return $String(argument);
+}, stringIndexOf = functionUncurryThis("".indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$({
+    target: "String",
+    proto: !0,
+    forced: !function(METHOD_NAME) {
+        var regexp = /./;
+        try {
+            "/./"[METHOD_NAME](regexp);
+        } catch (error1) {
+            try {
+                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
+            } catch (error2) {/* empty */}
+        }
+        return !1;
+    }("includes")
+}, {
+    includes: function(searchString /* , position = 0 */) {
+        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var includes$3 = getBuiltInPrototypeMethod$2("String", "includes"), isPrototypeOf = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype = Array.prototype, StringPrototype = String.prototype;
+
+const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.includes;
+    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
+}));
 
 /**
- * FormGroup - A component for grouping form controls with labels and help text
+ * Get GPU memory info if available (Chrome DevTools only)
  */
-const FormGroup = ({children: children, label: label, helperText: helperText, htmlFor: htmlFor, className: className = "", style: style, disabled: disabled = !1, required: required = !1, invalid: invalid = !1, valid: valid = !1, size: size = "md"}) => {
-    const {generateFormGroupClass: generateFormGroupClass} = 
-    /**
- * Form Group state and functionality
- * @param initialProps - Initial form group properties
- * @returns Form Group state and methods
+/**
+ * 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
  */
-    function(initialProps) {
-        // Default form group properties
-        const defaultProps = {
-            size: "md",
-            disabled: !1,
-            invalid: !1,
-            valid: !1,
-            ...initialProps
-        };
-        /**
-   * Generate form group class based on properties
-   * @param props - Form group properties
-   * @returns Class string
-   */        return {
-            defaultProps: defaultProps,
-            generateFormGroupClass: props => {
-                const {size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props;
-                return `${FORM_GROUP_CLASSES_BASE} ${"md" === size ? "" : "sm" === size ? FORM_GROUP_CLASSES_SMALL : FORM_GROUP_CLASSES_LARGE} ${invalid ? FORM_GROUP_CLASSES_INVALID : valid ? FORM_GROUP_CLASSES_VALID : ""} ${disabled ? FORM_GROUP_CLASSES_DISABLED : ""} ${className}`.trim();
-            }
-        };
-    }({
-        size: size,
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid
-    }), formGroupClass = generateFormGroupClass({
-        className: className,
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid,
-        size: size
-    });
-    return jsxs("div", {
-        className: formGroupClass,
-        style: style,
-        children: [ label && jsxs("label", {
-            className: "c-form-group__label",
-            htmlFor: htmlFor,
-            children: [ label, required && jsx("span", {
-                className: "c-form-group__required",
-                children: "*"
+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 = 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 = useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "8px",
+        paddingBottom: "8px",
+        borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
+    })), []), titleStyle = useMemo((() => ({
+        fontWeight: "bold",
+        fontSize: "13px",
+        color: "#fff"
+    })), []), closeButtonStyle = useMemo((() => ({
+        background: "transparent",
+        border: "none",
+        color: "#9ca3af",
+        cursor: "pointer",
+        fontSize: "16px",
+        padding: "0",
+        lineHeight: "1"
+    })), []), metricRowStyle = useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "6px"
+    })), []), labelStyle = useMemo((() => ({
+        color: "#9ca3af",
+        marginRight: "12px"
+    })), []), valueStyle = useMemo((() => ({
+        fontWeight: "bold"
+    })), []);
+    // Get quality level badge color
+        return isVisible ? jsxs("div", {
+        style: dashboardStyle,
+        children: [ jsxs("div", {
+            style: headerStyle,
+            children: [ jsx("span", {
+                style: titleStyle,
+                children: "Performance Monitor"
+            }), onClose && jsx("button", {
+                style: closeButtonStyle,
+                onClick: onClose,
+                "aria-label": "Close performance dashboard",
+                children: "×"
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "FPS"
+            }), jsx("span", {
+                style: {
+                    ...valueStyle,
+                    color: getFpsColor(metrics.fps)
+                },
+                children: Math.round(metrics.fps)
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "Frame Time"
+            }), jsxs("span", {
+                style: valueStyle,
+                children: [ metrics.frameTime.toFixed(2), "ms" ]
+            }) ]
+        }), jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "Quality"
+            }), 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 && jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsx("span", {
+                style: labelStyle,
+                children: "GPU Memory"
+            }), jsxs("span", {
+                style: valueStyle,
+                children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
+            }) ]
+        }), metrics.isAutoScaling && 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"
+        }), jsxs("div", {
+            style: {
+                marginTop: "8px",
+                paddingTop: "8px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                alignItems: "center",
+                gap: "6px"
+            },
+            children: [ jsx("div", {
+                style: {
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: getFpsColor(metrics.fps),
+                    animation: metrics.fps < 45 ? "pulse 1s infinite" : "none"
+                }
+            }), 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"
             }) ]
-        }), jsx("div", {
-            className: "c-form-group__field",
-            children: children
-        }), helperText && jsx("div", {
-            className: "c-form-group__helper",
-            children: helperText
         }) ]
-    });
+    }) : null;
 };
 
-FormGroup.displayName = "FormGroup";
+// 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);
+}
 
 /**
- * Input - A component for text input fields
+ * Mobile optimization presets
+ *
+ * These presets adjust glass effect parameters based on device performance tier
+ * to ensure smooth animations and responsive interactions.
  */
-const Input =  memo( forwardRef((({type: type = "text", value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
-    const {generateInputClass: generateInputClass} = 
+/**
+ * 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
+}, 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
+        }
+    }
+};
+
+/**
+ * Balanced preset - Good quality with reasonable performance
+ * Default preset for most mobile devices
+ */
+/**
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Dynamic border-radius extraction from children CSS properties
+ * - Automatic light/dark theme detection via overLight prop
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ * - Design token integration for consistent theming
+ * - 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
+ * - Follows BEM methodology for class naming
+ * - Implements focus-ring mixin for accessibility
+ * - Supports reduced motion and high contrast preferences
+ *
+ * @example
+ * // Basic usage with dynamic border-radius extraction
+ * <AtomixGlass>
+ *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Manual border-radius override
+ * <AtomixGlass borderRadius={20}>
+ *   <div>Content with 20px glass radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Interactive glass with click handler
+ * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
+ *   <div>Clickable content</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Boolean mode (explicit control)
+ * <AtomixGlass overLight={true}>
+ *   <div>Content on light background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Auto-detection mode
+ * <AtomixGlass overLight="auto">
+ *   <div>Content with auto-detected background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Object config with custom settings
+ * <AtomixGlass
+ *   overLight={{
+ *     threshold: 0.8,
+ *     opacity: 0.6,
+ *     contrast: 1.8,
+ *     brightness: 1.0,
+ *     saturationBoost: 1.5
+ *   }}
+ * >
+ *   <div>Content with custom overLight config</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Debug mode for overLight detection
+ * <AtomixGlass overLight="auto" debugOverLight={true}>
+ *   <div>Content with debug logging enabled</div>
+ * </AtomixGlass>
+ *
+ * @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 = useRef(null), contentRef = 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,
+        globalMousePosition: externalGlobalMousePosition,
+        mouseOffset: externalMouseOffset,
+        mouseContainer: mouseContainer,
+        overLight: overLight,
+        reducedMotion: reducedMotion,
+        highContrast: highContrast,
+        withoutEffects: withoutEffects,
+        elasticity: elasticity,
+        onClick: onClick,
+        debugOverLight: debugOverLight,
+        debugPerformance: debugPerformance,
+        children: children,
+        blurAmount: blurAmount,
+        saturation: saturation,
+        withLiquidBlur: withLiquidBlur,
+        padding: padding,
+        style: style,
+        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
+    !
     /**
- * Input state and functionality
- * @param initialProps - Initial input properties
- * @returns Input state and methods
+ * 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(initialProps) {
-        // Default input properties
-        const defaultProps = {
-            size: "md",
-            disabled: !1,
-            invalid: !1,
-            valid: !1,
-            ...initialProps
-        };
+    function({baseParams: baseParams, breakpoints: breakpoints = DEFAULT_BREAKPOINTS, enabled: enabled = !0, enablePerformanceAdjustment: enablePerformanceAdjustment = !0, debug: debug = !1}) {
+        const [responsiveParams, setResponsiveParams] = useState(baseParams), [currentBreakpoint, setCurrentBreakpoint] = useState("desktop"), [performanceTier, setPerformanceTier] = useState("high"), [isActive, setIsActive] = useState(enabled), baseParamsRef = useRef(baseParams), breakpointsRef = useRef(breakpoints);
+        // Update refs when props change
+        baseParamsRef.current = baseParams, breakpointsRef.current = breakpoints;
         /**
-   * Generate input class based on properties
-   * @param props - Input properties
-   * @returns Class string
-   */        return {
-            defaultProps: defaultProps,
-            generateInputClass: props => {
-                const {size: size = defaultProps.size, variant: variant = defaultProps.variant, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = "", type: type} = props;
-                let validationClass = "";
-                invalid ? validationClass = INPUT_CLASSES_INVALID : valid && (validationClass = INPUT_CLASSES_VALID);
-                return `${INPUT_CLASSES_BASE} ${"md" === size ? "" : "sm" === size ? INPUT_CLASSES_SMALL : INPUT_CLASSES_LARGE} ${variant ? `c-input--${variant}` : ""} ${"textarea" === type ? "c-input--textarea" : ""} ${validationClass} ${disabled ? INPUT_CLASSES_DISABLED : ""} ${className}`.trim();
-            },
-            generateWrapperClass: props => {
-                const {className: className = ""} = props, {prefixIcon: prefixIcon = !1, suffixIcon: suffixIcon = !1, clearable: clearable = !1, showCounter: showCounter = !1, showPasswordToggle: showPasswordToggle = !1, fullWidth: fullWidth = !1} = initialProps || {}, classes = [ INPUT_ELEMENTS_WRAPPER ];
-                return prefixIcon && classes.push(INPUT_CLASSES_PREFIX_ICON), (suffixIcon || clearable || showPasswordToggle) && classes.push(INPUT_CLASSES_SUFFIX_ICON), 
-                clearable && classes.push(INPUT_CLASSES_CLEARABLE), showCounter && classes.push(INPUT_CLASSES_WITH_COUNTER), 
-                showPasswordToggle && classes.push(INPUT_CLASSES_PASSWORD_TOGGLE), fullWidth && classes.push(INPUT_CLASSES_FULL_WIDTH), 
-                className && classes.push(className), classes.filter(Boolean).join(" ");
+   * Calculate and apply responsive parameters
+   */
+        const calculateParams = 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 = useRef(null);
+            return useEffect((() => () => {
+                timeoutRef.current && clearTimeout(timeoutRef.current);
+            }), []), 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
+   */
+        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 ]), useCallback((() => {
+            calculateParams();
+        }), [ calculateParams ]);
     }({
-        size: size,
-        variant: variant,
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid
-    }), inputClass = generateInputClass({
-        className: `${className} ${glass ? "c-input--glass" : ""}`.trim(),
-        size: size,
-        variant: variant,
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid,
-        type: type
-    }), inputElement = jsx("input", {
-        ref: ref,
-        type: type,
-        className: inputClass,
-        value: value,
-        defaultValue: defaultValue,
-        onChange: onChange,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        placeholder: placeholder,
-        disabled: disabled,
-        required: required,
-        readOnly: readOnly,
-        id: id,
-        name: name,
-        autoComplete: autoComplete,
-        autoFocus: autoFocus,
-        maxLength: maxLength,
-        minLength: minLength,
-        pattern: pattern,
-        min: min,
-        max: max,
-        step: step,
-        "aria-label": ariaLabel,
-        "aria-describedby": ariaDescribedBy,
-        "aria-invalid": invalid,
-        style: glass ? {
-            ...style
-        } : style
-    });
-    if (glass) {
-        // Default glass settings for inputs
-        const defaultGlassProps = {
-            displacementScale: 60,
-            blurAmount: 1,
-            saturation: 180,
-            aberrationIntensity: .2,
-            borderRadius: 12,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
-            ...defaultGlassProps,
-            ...glass
-        };
-        return jsx(AtomixGlass, {
-            ...glassProps,
-            children: inputElement
-        });
-    }
-    return inputElement;
-})));
-
-Input.displayName = "Input";
-
-/**
- * Radio - A component for radio button inputs
+        baseParams: {
+            ...useMemo((() => 
+            /**
+ * Get preset by name
  */
-const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
-    const {generateRadioClass: generateRadioClass} = 
+            function(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
+ */ (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} = 
     /**
- * Radio state and functionality
- * @param initialProps - Initial radio properties
- * @returns Radio state and methods
+ * 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(initialProps) {
-        // Default radio properties
-        const defaultProps = {
-            disabled: !1,
-            invalid: !1,
-            valid: !1,
-            ...initialProps
-        };
-        /**
-   * Generate radio class based on properties
-   * @param props - Radio properties
-   * @returns Class string
-   */        return {
-            defaultProps: defaultProps,
-            generateRadioClass: props => {
-                const {disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props;
-                let validationClass = "";
-                invalid ? validationClass = RADIO_CLASSES_INVALID : valid && (validationClass = RADIO_CLASSES_VALID);
-                return `${RADIO_CLASSES_BASE} ${validationClass} ${disabled ? RADIO_CLASSES_DISABLED : ""} ${className}`.trim();
+    function(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] = useState({
+            fps: 0,
+            frameTime: 0,
+            gpuMemory: null,
+            qualityLevel: "medium",
+            timestamp: 0,
+            isAutoScaling: !0,
+            lowFpsCount: 0
+        }), [manualOverride, setManualOverride] = useState(!1), [isEnabled, setIsEnabled] = useState(enabled), frameCountRef = useRef(0), lastFpsUpdateRef = useRef(0), lastFrameTimeRef = useRef(0), animationFrameRef = useRef(null), lowFpsCountRef = useRef(0), highFpsCountRef = useRef(0), qualityLevelRef = useRef("medium"), updateMetrics = useCallback((newMetrics => {
+            setMetrics((prev => ({
+                ...prev,
+                ...newMetrics,
+                timestamp: performance.now()
+            })));
+        }), []), applyAutoScaling = 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 = 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
+   */
+        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
+   */
+        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 = useCallback((level => {
+            setManualOverride(!0), qualityLevelRef.current = level, updateMetrics({
+                qualityLevel: level,
+                isAutoScaling: !1
+            });
+        }), [ updateMetrics, debug ]), resetAutoScaling = useCallback((() => {
+            setManualOverride(!1), lowFpsCountRef.current = 0, highFpsCountRef.current = 0, 
+            updateMetrics({
+                isAutoScaling: !0,
+                lowFpsCount: 0
+            });
+        }), [ updateMetrics, debug ]), toggleMonitoring = 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
         };
     }({
+        enabled: !1,
+        // We'll toggle manually based on prop
+        debug: !1,
+        showOverlay: !1
+    });
+    // Auto-start performance monitoring if enabled (only in development)
+        React.useEffect((() => {
+        "development" === process.env.NODE_ENV && window?.enablePerformanceMonitoring && toggleMonitoring();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }), []);
+    // Only run once on mount
+    const isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
+        if (!isFixedOrSticky) return {};
+        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
+        return {
+            ...p && {
+                position: p
+            },
+            ...void 0 !== t && {
+                top: t
+            },
+            ...void 0 !== l && {
+                left: l
+            },
+            ...void 0 !== r && {
+                right: r
+            },
+            ...void 0 !== b && {
+                bottom: b
+            }
+        };
+    }), [ isFixedOrSticky, restStyle ]);
+    // Calculate base style with transforms
+    // When layout is hoisted to the root, strip those props from the container
+    useMemo((() => {
+        if (isFixedOrSticky) {
+            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
+            return {
+                ...visualStyle,
+                ...!effectiveWithoutEffects && {
+                    transform: transformStyle
+                }
+            };
+        }
+        return {
+            ...restStyle,
+            ...!effectiveWithoutEffects && {
+                transform: transformStyle
+            }
+        };
+    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
+    // Build className with state modifiers
+    const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
+        position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
+        top: isFixedOrSticky ? 0 : restStyle.top || 0,
+        left: isFixedOrSticky ? 0 : restStyle.left || 0
+    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = useMemo((() => {
+        // Keep a reference to positionStyles to avoid unused-variable lint,
+        // but sizing is driven by explicit width/height or measured size.
+        positionStyles.position;
+        const resolveLength = (value, measured) => void 0 !== value ? "number" == typeof value ? `${value}px` : value : measured > 0 ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
+        return {
+            width: resolveLength(effectiveWidth, glassSize.width),
+            height: resolveLength(effectiveHeight, glassSize.height)
+        };
+    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
+        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
+        return {
+            borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
+            borderStop1: Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER),
+            borderStop2: Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER),
+            borderOpacities: [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ],
+            hoverPositions: {
+                hover1: {
+                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
+                },
+                hover2: {
+                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
+                },
+                hover3: {
+                    x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+                    y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
+                }
+            },
+            basePosition: {
+                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+                y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
+            },
+            mx: mx,
+            my: my,
+            absMx: absMx,
+            absMy: absMy
+        };
+    }), [ mouseOffset.x, mouseOffset.y ]), opacityValues = useMemo((() => {
+        const overLightOpacity = overLightConfig.opacity;
+        return {
+            hover1: isHovered || isActive ? .5 : 0,
+            hover2: isActive ? .5 : 0,
+            hover3: isHovered ? .4 : isActive ? .8 : 0,
+            base: isOverLight ? overLightOpacity || .4 : 0,
+            over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
+        };
+    }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
+        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
+        return {
+            ...void 0 !== customZIndex && {
+                "--atomix-glass-base-z-index": customZIndex
+            },
+            "--atomix-glass-radius": `${effectiveBorderRadius}px`,
+            "--atomix-glass-transform": transformStyle || "none",
+            // Internal decorative layers are positioned relative to the root;
+            "--atomix-glass-position": rootLayoutStyle.position,
+            "--atomix-glass-top": `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
+            "--atomix-glass-left": `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
+            "--atomix-glass-width": adjustedSize.width,
+            "--atomix-glass-height": adjustedSize.height,
+            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
+            "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
+            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-hover-1-opacity": opacityValues.hover1,
+            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+            "--atomix-glass-hover-2-opacity": opacityValues.hover2,
+            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+            "--atomix-glass-hover-3-opacity": opacityValues.hover3,
+            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+            "--atomix-glass-base-opacity": opacityValues.base,
+            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-overlay-opacity": opacityValues.over,
+            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-overlay-highlight-opacity": opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
+            "--atomix-glass-overlay-highlight-bg": `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
+        };
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex, rootLayoutStyle, isFixedOrSticky ]), renderBackgroundLayer = layerType => jsx("div", {
+        className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" ")
+    });
+    // Calculate position and size styles for internal layers
+    // When root is fixed/sticky, internal layers use absolute (relative to root)
+        return jsxs("div", {
+        ...rest,
+        className: componentClassName,
+        style: {
+            ...glassVars
+        },
+        role: role || (onClick ? "button" : void 0),
+        tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
+        "aria-pressed": !(!onClick || !isActive) || !onClick && void 0,
+        onKeyDown: onClick ? handleKeyDown : void 0,
+        children: [ jsx(AtomixGlassContainer, {
+            ref: glassRef,
+            contentRef: contentRef,
+            className: className,
+            style: {
+                ...restStyle,
+                ...!isFixedOrSticky && {
+                    position: "relative"
+                }
+            },
+            borderRadius: effectiveBorderRadius,
+            displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
+            blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
+            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
+            aberrationIntensity: effectiveWithoutEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
+            glassSize: glassSize,
+            padding: padding,
+            mouseOffset: effectiveWithoutEffects ? {
+                x: 0,
+                y: 0
+            } : mouseOffset,
+            globalMousePosition: effectiveWithoutEffects ? {
+                x: 0,
+                y: 0
+            } : globalMousePosition,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onMouseDown: handleMouseDown,
+            onMouseUp: handleMouseUp,
+            isHovered: isHovered,
+            isActive: isActive,
+            overLight: isOverLight,
+            overLightConfig: {
+                contrast: overLightConfig.contrast,
+                brightness: overLightConfig.brightness,
+                shadowIntensity: overLightConfig.shadowIntensity,
+                borderOpacity: overLightConfig.borderOpacity
+            },
+            onClick: onClick,
+            mode: mode,
+            effectiveWithoutEffects: effectiveWithoutEffects,
+            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) && jsxs(Fragment, {
+            children: [ jsx("div", {
+                className: ATOMIX_GLASS.HOVER_1_CLASS
+            }), jsx("div", {
+                className: ATOMIX_GLASS.HOVER_2_CLASS
+            }), jsx("div", {
+                className: ATOMIX_GLASS.HOVER_3_CLASS
+            }) ]
+        }), renderBackgroundLayer("dark"), renderBackgroundLayer("black"), shouldRenderOverLightLayers && jsxs(Fragment, {
+            children: [ jsx("div", {
+                className: ATOMIX_GLASS.BASE_LAYER_CLASS
+            }), jsx("div", {
+                className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
+            }), jsx("div", {
+                className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS
+            }) ]
+        }), withBorder && jsxs(Fragment, {
+            children: [ jsx("span", {
+                className: ATOMIX_GLASS.BORDER_1_CLASS
+            }), jsx("span", {
+                className: ATOMIX_GLASS.BORDER_2_CLASS
+            }) ]
+        }), debugPerformance && performanceMetrics && jsx(PerformanceDashboard, {
+            metrics: performanceMetrics,
+            isVisible: !0,
+            onClose: () => {}
+        }) ]
+    });
+}
+
+const Checkbox =  React.memo( forwardRef((({label: label, checked: checked, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass, ...props}, ref) => {
+    // Local ref to handle indeterminate state
+    const localRef = useRef(null);
+    // Merge refs
+        useImperativeHandle(ref, (() => localRef.current)), 
+    // Handle indeterminate
+    useEffect((() => {
+        localRef.current && (localRef.current.indeterminate = Boolean(indeterminate));
+    }), [ indeterminate ]);
+    // Generate classes
+    let validationClass = "";
+    invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid");
+    const checkboxClass = `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${glass ? "c-checkbox--glass" : ""} ${className}`.trim(), inputElement = jsx("input", {
+        ref: localRef,
+        type: "checkbox",
+        className: "c-checkbox__input",
+        checked: checked,
+        onChange: onChange,
+        onClick: onClick,
         disabled: disabled,
-        invalid: invalid,
-        valid: valid
-    }), radioClass = generateRadioClass({
-        className: `${className} ${glass ? "c-radio--glass" : ""}`.trim(),
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid
-    }), radioContent = jsxs("div", {
-        className: radioClass,
+        required: required,
+        id: id,
+        name: name,
+        value: value,
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid,
+        ...props
+    });
+    let content;
+    if (content = id && label ? jsxs("div", {
+        className: checkboxClass,
         style: style,
-        children: [ jsx("input", {
-            type: "radio",
-            className: "c-radio__input",
-            checked: checked,
-            onChange: onChange,
-            disabled: disabled,
-            required: required,
-            id: id,
-            name: name,
-            value: value,
-            "aria-label": label ? void 0 : ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            "aria-invalid": invalid
-        }), label && jsx("label", {
-            className: "c-radio__label",
+        children: [ inputElement, jsx("label", {
+            className: "c-checkbox__label",
             htmlFor: id,
             children: label
         }) ]
-    });
-    if (glass) {
-        // Default glass settings for radio buttons
+    }) : label ? jsxs("label", {
+        className: checkboxClass,
+        style: style,
+        children: [ inputElement, jsx("span", {
+            className: "c-checkbox__label",
+            children: label
+        }) ]
+    }) : jsx("div", {
+        className: checkboxClass,
+        style: style,
+        children: inputElement
+    }), glass) {
         const defaultGlassProps = {
             displacementScale: 40,
-            blurAmount: 1,
-            saturation: 160,
-            aberrationIntensity: .3,
-            borderRadius: 6,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
-            ...defaultGlassProps,
-            ...glass
-        };
-        return jsx(AtomixGlass, {
-            ...glassProps,
-            children: radioContent
-        });
-    }
-    return radioContent;
-}));
-
-Radio.displayName = "Radio";
-
-var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
-
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
-
-var fails$8 = function(exec) {
-    try {
-        return !!exec();
-    } catch (error) {
-        return !0;
-    }
-}, functionBindNative = !fails$8((function() {
-    // eslint-disable-next-line es/no-function-prototype-bind -- safe
-    var test = function() {/* empty */}.bind();
-    // eslint-disable-next-line no-prototype-builtins -- safe
-        return "function" != typeof test || test.hasOwnProperty("prototype");
-})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
-    return function() {
-        return call$5.apply(fn, arguments);
-    };
-}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
-    return it && it.Math === Math && it;
-}, globalThis_1 = 
-// eslint-disable-next-line es/no-global-this -- safe
-check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
-// eslint-disable-next-line no-restricted-globals -- safe
-check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
-// eslint-disable-next-line no-new-func -- fallback
-function() {
-    return this;
-}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
-    return call$4.apply(apply$1, arguments);
-}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
-    return stringSlice(toString$3(it), 8, -1);
-}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
-    // Nashorn bug:
-    //   https://github.com/zloirock/core-js/issues/1128
-    //   https://github.com/zloirock/core-js/issues/1130
-    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
-}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
-    return "function" == typeof argument || argument === documentAll;
-} : function(argument) {
-    return "function" == typeof argument;
-}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty({}, 1, {
-        get: function() {
-            return 7;
-        }
-    })[1];
-})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
-    return call$3.apply(call$3, arguments);
-}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
-    1: 2
-}, 1);
-
-// `Object.prototype.propertyIsEnumerable` method implementation
-// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
-objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
-    var descriptor = getOwnPropertyDescriptor$1(this, V);
-    return !!descriptor && descriptor.enumerable;
-} : $propertyIsEnumerable;
-
-var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
-    return {
-        enumerable: !(1 & bitmap),
-        configurable: !(2 & bitmap),
-        writable: !(4 & bitmap),
-        value: value
-    };
-}, fails$5 = fails$8, classof$3 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
-    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
-    // eslint-disable-next-line no-prototype-builtins -- safe
-    return !$Object$3("z").propertyIsEnumerable(0);
-})) ? function(it) {
-    return "String" === classof$3(it) ? split(it, "") : $Object$3(it);
-} : $Object$3, isNullOrUndefined$2 = function(it) {
-    return null == it;
-}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$3 = function(it) {
-    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
-    return it;
-}, IndexedObject = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
-    return IndexedObject(requireObjectCoercible$2(it));
-}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
-    return "object" == typeof it ? null !== it : isCallable$7(it);
-}, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
-    return isCallable$6(variable) ? variable : void 0;
-}, navigator = globalThis_1.navigator, userAgent$1 = navigator && navigator.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
-
-v8 && (
-// in old Chrome, versions of V8 isn't V8 = Chrome / 10
-// but their correct versions are not interesting for us
-version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
-// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
-// so check `userAgent` even if `.v8` exists, but 0
-!version && userAgent && (!(match = userAgent.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent.match(/Chrome\/(\d+)/)) && (version = +match[1]);
-
-var V8_VERSION = version, fails$4 = fails$8, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
-    var symbol = Symbol("symbol detection");
-    // Chrome 38 Symbol has incorrect toString conversion
-    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
-    // of course, fail.
-        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
-    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
-    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
-})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$1 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
-    return "symbol" == typeof it;
-} : function(it) {
-    var $Symbol = function(namespace, method) {
-        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$a[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$a[namespace] && globalThis$a[namespace][method];
-    }("Symbol");
-    return isCallable$5($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$2(it));
-}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$5 = TypeError, aCallable$2 = function(argument) {
-    if (isCallable$4(argument)) return argument;
-    throw new $TypeError$5(function(argument) {
-        try {
-            return $String$2(argument);
-        } catch (error) {
-            return "Object";
-        }
-    }(argument) + " is not a function");
-}, aCallable$1 = aCallable$2, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$4 = TypeError, sharedStore = {
-    exports: {}
-}, globalThis$6 = globalThis_1, defineProperty = Object.defineProperty, globalThis$5 = globalThis_1, store$1 = sharedStore.exports = globalThis$5["__core-js_shared__"] || function(key, value) {
-    try {
-        defineProperty(globalThis$6, key, {
-            value: value,
-            configurable: !0,
-            writable: !0
-        });
-    } catch (error) {
-        globalThis$6[key] = value;
-    }
-    return value;
-}("__core-js_shared__", {});
-
-/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
-    version: "3.43.0",
-    mode: "pure",
-    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
-    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
-    source: "https://github.com/zloirock/core-js"
-});
-
-var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
-    return hasOwnProperty($Object$1(requireObjectCoercible$1(it)), key);
-}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
-    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
-}, wellKnownSymbol$5 = function(name) {
-    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
-    WellKnownSymbolsStore[name];
-}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
-    if (!isObject$3(input) || isSymbol$1(input)) return input;
-    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$1(func));
-    if (exoticToPrim) {
-        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
-        !isObject$3(result) || isSymbol$1(result)) return result;
-        throw new $TypeError$3("Can't convert object to primitive value");
+            blurAmount: 1,
+            saturation: 160,
+            aberrationIntensity: .3,
+            borderRadius: 6,
+            mode: "shader"
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: content
+        });
     }
-    return void 0 === pref && (pref = "number"), function(input, pref) {
-        var fn, val;
-        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
-        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
-        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
-        throw new $TypeError$4("Can't convert object to primitive value");
-    }(input, pref);
-}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
-    var key = toPrimitive(argument, "string");
-    return isSymbol(key) ? key : key + "";
-}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
-        get: function() {
-            return 7;
-        }
-    }).a;
-    var it;
-})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+    return content;
+})));
 
-// `Object.getOwnPropertyDescriptor` method
-// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
-objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
-    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
-        return $getOwnPropertyDescriptor$1(O, P);
-    } catch (error) {/* empty */}
-    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
+Checkbox.displayName = "Checkbox";
+
+/**
+ * Form - A component for creating form layouts
+ */
+const Form = ({children: children, onSubmit: onSubmit, onReset: onReset, className: className = "", style: style, disabled: disabled = !1, id: id, method: method = "post", encType: encType, noValidate: noValidate = !1, autoComplete: autoComplete = "on"}) => {
+    const {generateFormClass: generateFormClass, handleSubmit: handleSubmit, handleReset: handleReset} = 
+    /**
+ * Form state and functionality
+ * @param initialProps - Initial form properties
+ * @returns Form state and methods
+ */
+    function(initialProps) {
+        // Default form properties
+        const defaultProps = {
+            disabled: !1,
+            ...initialProps
+        };
+        /**
+   * Generate form class based on properties
+   * @param props - Form properties
+   * @returns Class string
+   */        return {
+            defaultProps: defaultProps,
+            generateFormClass: props => {
+                const {disabled: disabled = defaultProps.disabled, className: className = ""} = props;
+                return `${FORM_CLASSES_BASE} ${disabled ? FORM_CLASSES_DISABLED : ""} ${className}`.trim();
+            },
+            handleSubmit: handler => event => {
+                event.preventDefault(), !defaultProps.disabled && handler && handler(event);
+            },
+            handleReset: handler => event => {
+                !defaultProps.disabled && handler && handler(event);
+            }
+        };
+    }({
+        disabled: disabled
+    }), formClass = generateFormClass({
+        className: className,
+        disabled: disabled
+    });
+    return jsx("form", {
+        id: id,
+        className: formClass,
+        style: style,
+        onSubmit: handleSubmit(onSubmit),
+        onReset: handleReset(onReset),
+        method: method,
+        encType: encType,
+        noValidate: noValidate,
+        autoComplete: autoComplete,
+        children: children
+    });
 };
 
-var fails$2 = fails$8, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
-    var value = data[normalize(feature)];
-    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$2(detection) : !!detection);
-}, normalize = isForced$1.normalize = function(string) {
-    return String(string).replace(replacement, ".").toLowerCase();
-}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable = aCallable$2, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
-        value: 42,
-        writable: !1
-    }).prototype;
-})), isObject$1 = isObject$5, $String$1 = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
-    if (isObject$1(argument)) return argument;
-    throw new $TypeError$2($String$1(argument) + " is not an object");
-}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+Form.displayName = "Form";
 
-// `Object.defineProperty` method
-// https://tc39.es/ecma262/#sec-object.defineproperty
-objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
-        var current = $getOwnPropertyDescriptor(O, P);
-        current && current.writable && (O[P] = Attributes.value, Attributes = {
-            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
-            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
-            writable: !1
+/**
+ * FormGroup - A component for grouping form controls with labels and help text
+ */
+const FormGroup = ({children: children, label: label, helperText: helperText, htmlFor: htmlFor, className: className = "", style: style, disabled: disabled = !1, required: required = !1, invalid: invalid = !1, valid: valid = !1, size: size = "md"}) => {
+    const {generateFormGroupClass: generateFormGroupClass} = 
+    /**
+ * Form Group state and functionality
+ * @param initialProps - Initial form group properties
+ * @returns Form Group state and methods
+ */
+    function(initialProps) {
+        // Default form group properties
+        const defaultProps = {
+            size: "md",
+            disabled: !1,
+            invalid: !1,
+            valid: !1,
+            ...initialProps
+        };
+        /**
+   * Generate form group class based on properties
+   * @param props - Form group properties
+   * @returns Class string
+   */        return {
+            defaultProps: defaultProps,
+            generateFormGroupClass: props => {
+                const {size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props;
+                return `${FORM_GROUP_CLASSES_BASE} ${"md" === size ? "" : "sm" === size ? FORM_GROUP_CLASSES_SMALL : FORM_GROUP_CLASSES_LARGE} ${invalid ? FORM_GROUP_CLASSES_INVALID : valid ? FORM_GROUP_CLASSES_VALID : ""} ${disabled ? FORM_GROUP_CLASSES_DISABLED : ""} ${className}`.trim();
+            }
+        };
+    }({
+        size: size,
+        disabled: disabled,
+        invalid: invalid,
+        valid: valid
+    }), formGroupClass = generateFormGroupClass({
+        className: className,
+        disabled: disabled,
+        invalid: invalid,
+        valid: valid,
+        size: size
+    });
+    return jsxs("div", {
+        className: formGroupClass,
+        style: style,
+        children: [ label && jsxs("label", {
+            className: "c-form-group__label",
+            htmlFor: htmlFor,
+            children: [ label, required && jsx("span", {
+                className: "c-form-group__required",
+                children: "*"
+            }) ]
+        }), jsx("div", {
+            className: "c-form-group__field",
+            children: children
+        }), helperText && jsx("div", {
+            className: "c-form-group__helper",
+            children: helperText
+        }) ]
+    });
+};
+
+FormGroup.displayName = "FormGroup";
+
+/**
+ * Input - A component for text input fields
+ */
+const Input =  memo( forwardRef((({type: type = "text", value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
+    const {generateInputClass: generateInputClass} = 
+    /**
+ * Input state and functionality
+ * @param initialProps - Initial input properties
+ * @returns Input state and methods
+ */
+    function(initialProps) {
+        // Default input properties
+        const defaultProps = {
+            size: "md",
+            disabled: !1,
+            invalid: !1,
+            valid: !1,
+            ...initialProps
+        };
+        /**
+   * Generate input class based on properties
+   * @param props - Input properties
+   * @returns Class string
+   */        return {
+            defaultProps: defaultProps,
+            generateInputClass: props => {
+                const {size: size = defaultProps.size, variant: variant = defaultProps.variant, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = "", type: type} = props;
+                let validationClass = "";
+                invalid ? validationClass = INPUT_CLASSES_INVALID : valid && (validationClass = INPUT_CLASSES_VALID);
+                return `${INPUT_CLASSES_BASE} ${"md" === size ? "" : "sm" === size ? INPUT_CLASSES_SMALL : INPUT_CLASSES_LARGE} ${variant ? `c-input--${variant}` : ""} ${"textarea" === type ? "c-input--textarea" : ""} ${validationClass} ${disabled ? INPUT_CLASSES_DISABLED : ""} ${className}`.trim();
+            },
+            generateWrapperClass: props => {
+                const {className: className = ""} = props, {prefixIcon: prefixIcon = !1, suffixIcon: suffixIcon = !1, clearable: clearable = !1, showCounter: showCounter = !1, showPasswordToggle: showPasswordToggle = !1, fullWidth: fullWidth = !1} = initialProps || {}, classes = [ INPUT_ELEMENTS_WRAPPER ];
+                return prefixIcon && classes.push(INPUT_CLASSES_PREFIX_ICON), (suffixIcon || clearable || showPasswordToggle) && classes.push(INPUT_CLASSES_SUFFIX_ICON), 
+                clearable && classes.push(INPUT_CLASSES_CLEARABLE), showCounter && classes.push(INPUT_CLASSES_WITH_COUNTER), 
+                showPasswordToggle && classes.push(INPUT_CLASSES_PASSWORD_TOGGLE), fullWidth && classes.push(INPUT_CLASSES_FULL_WIDTH), 
+                className && classes.push(className), classes.filter(Boolean).join(" ");
+            }
+        };
+    }({
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        invalid: invalid,
+        valid: valid
+    }), inputClass = generateInputClass({
+        className: `${className} ${glass ? "c-input--glass" : ""}`.trim(),
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        invalid: invalid,
+        valid: valid,
+        type: type
+    }), inputElement = jsx("input", {
+        ref: ref,
+        type: type,
+        className: inputClass,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        placeholder: placeholder,
+        disabled: disabled,
+        required: required,
+        readOnly: readOnly,
+        id: id,
+        name: name,
+        autoComplete: autoComplete,
+        autoFocus: autoFocus,
+        maxLength: maxLength,
+        minLength: minLength,
+        pattern: pattern,
+        min: min,
+        max: max,
+        step: step,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid,
+        style: glass ? {
+            ...style
+        } : style
+    });
+    if (glass) {
+        // Default glass settings for inputs
+        const defaultGlassProps = {
+            displacementScale: 60,
+            blurAmount: 1,
+            saturation: 180,
+            aberrationIntensity: .2,
+            borderRadius: 12,
+            mode: "shader"
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: inputElement
         });
     }
-    return $defineProperty(O, P, Attributes);
-} : $defineProperty : function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
-        return $defineProperty(O, P, Attributes);
-    } catch (error) {/* empty */}
-    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
-    return "value" in Attributes && (O[P] = Attributes.value), O;
-};
-
-var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
-    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
-} : function(object, key, value) {
-    return object[key] = value, object;
-}, globalThis$2 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
-    return aCallable(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
-        return fn.apply(that, arguments);
-    };
-}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
-    var Wrapper = function(a, b, c) {
-        if (this instanceof Wrapper) {
-            switch (arguments.length) {
-              case 0:
-                return new NativeConstructor;
+    return inputElement;
+})));
 
-              case 1:
-                return new NativeConstructor(a);
+Input.displayName = "Input";
 
-              case 2:
-                return new NativeConstructor(a, b);
+/**
+ * Radio - A component for radio button inputs
+ */
+const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
+    const {generateRadioClass: generateRadioClass} = 
+    /**
+ * Radio state and functionality
+ * @param initialProps - Initial radio properties
+ * @returns Radio state and methods
+ */
+    function(initialProps) {
+        // Default radio properties
+        const defaultProps = {
+            disabled: !1,
+            invalid: !1,
+            valid: !1,
+            ...initialProps
+        };
+        /**
+   * Generate radio class based on properties
+   * @param props - Radio properties
+   * @returns Class string
+   */        return {
+            defaultProps: defaultProps,
+            generateRadioClass: props => {
+                const {disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props;
+                let validationClass = "";
+                invalid ? validationClass = RADIO_CLASSES_INVALID : valid && (validationClass = RADIO_CLASSES_VALID);
+                return `${RADIO_CLASSES_BASE} ${validationClass} ${disabled ? RADIO_CLASSES_DISABLED : ""} ${className}`.trim();
             }
-            return new NativeConstructor(a, b, c);
-        }
-        return apply(NativeConstructor, this, arguments);
-    };
-    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
-}, _export = function(options, source) {
-    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$2 : STATIC ? globalThis$2[TARGET] : globalThis$2[TARGET] && globalThis$2[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
-    for (key in source) 
-    // contains in native
-    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
-    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
-    // export native or implementation
-    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
-    // bind methods to global for calling from export context
-    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$2) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
-    // add a flag to not completely full polyfills
-    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
-    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
-    // export virtual prototype methods
-    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
-    // export real prototype methods
-    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
-}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
-    var n = +x;
-    return (n > 0 ? floor : ceil)(n);
-}, toIntegerOrInfinity$2 = function(argument) {
-    var number = +argument;
-    // eslint-disable-next-line no-self-compare -- NaN check
-        return number != number || 0 === number ? 0 : trunc(number);
-}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, min$1 = Math.min, globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$2 = function(CONSTRUCTOR, METHOD) {
-    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
-    if (pureMethod) return pureMethod;
-    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
-    return NativePrototype && NativePrototype[METHOD];
-}, toIntegerOrInfinity = toIntegerOrInfinity$2, max = Math.max, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = function(obj) {
-    return argument = obj.length, (len = toIntegerOrInfinity$1(argument)) > 0 ? min$1(len, 9007199254740991) : 0;
-    var argument, len;
-}, createMethod = function(IS_INCLUDES) {
-    return function($this, el, fromIndex) {
-        var O = toIndexedObject($this), length = lengthOfArrayLike(O);
-        if (0 === length) return !IS_INCLUDES && -1;
-        var value, index = function(index, length) {
-            var integer = toIntegerOrInfinity(index);
-            return integer < 0 ? max(integer + length, 0) : min(integer, length);
-        }(fromIndex, length);
-        // Array#includes uses SameValueZero equality algorithm
-        // eslint-disable-next-line no-self-compare -- NaN check
-        if (IS_INCLUDES && el != el) {
-            for (;length > index; ) 
-            // eslint-disable-next-line no-self-compare -- NaN check
-            if ((value = O[index++]) != value) return !0;
-            // Array#indexOf ignores holes, Array#includes - not
-                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
-        return !IS_INCLUDES && -1;
-    };
-}, $includes = [ createMethod(!0), createMethod(!1) ][0];
-
-// `Array.prototype.includes` method
-// https://tc39.es/ecma262/#sec-array.prototype.includes
-_export({
-    target: "Array",
-    proto: !0,
-    forced: fails$8((function() {
-        // eslint-disable-next-line es/no-array-prototype-includes -- detection
-        return !Array(1).includes();
-    }))
-}, {
-    includes: function(el /* , fromIndex = 0 */) {
-        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
-    }
-});
-
-var includes$4 = getBuiltInPrototypeMethod$2("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
-
-test[wellKnownSymbol$5("toStringTag")] = "z";
-
-var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
-    return arguments;
-}()), classof = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
-    var O, tag, result;
-    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
-        try {
-            return it[key];
-        } catch (error) {/* empty */}
-    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
-}, $String = String, MATCH = wellKnownSymbol$5("match"), $ = _export, notARegExp = function(it) {
-    if (function(it) {
-        var isRegExp;
-        return isObject(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$2(it));
-    }(it)) throw new $TypeError("The method doesn't accept regular expressions");
-    return it;
-}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
-    if ("Symbol" === classof(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
-    return $String(argument);
-}, stringIndexOf = functionUncurryThis("".indexOf);
-
-// `String.prototype.includes` method
-// https://tc39.es/ecma262/#sec-string.prototype.includes
-$({
-    target: "String",
-    proto: !0,
-    forced: !function(METHOD_NAME) {
-        var regexp = /./;
-        try {
-            "/./"[METHOD_NAME](regexp);
-        } catch (error1) {
-            try {
-                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
-            } catch (error2) {/* empty */}
-        }
-        return !1;
-    }("includes")
-}, {
-    includes: function(searchString /* , position = 0 */) {
-        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
+        };
+    }({
+        disabled: disabled,
+        invalid: invalid,
+        valid: valid
+    }), radioClass = generateRadioClass({
+        className: `${className} ${glass ? "c-radio--glass" : ""}`.trim(),
+        disabled: disabled,
+        invalid: invalid,
+        valid: valid
+    }), radioContent = jsxs("div", {
+        className: radioClass,
+        style: style,
+        children: [ jsx("input", {
+            type: "radio",
+            className: "c-radio__input",
+            checked: checked,
+            onChange: onChange,
+            disabled: disabled,
+            required: required,
+            id: id,
+            name: name,
+            value: value,
+            "aria-label": label ? void 0 : ariaLabel,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": invalid
+        }), label && jsx("label", {
+            className: "c-radio__label",
+            htmlFor: id,
+            children: label
+        }) ]
+    });
+    if (glass) {
+        // Default glass settings for radio buttons
+        const defaultGlassProps = {
+            displacementScale: 40,
+            blurAmount: 1,
+            saturation: 160,
+            aberrationIntensity: .3,
+            borderRadius: 6,
+            mode: "shader"
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: radioContent
+        });
     }
-});
+    return radioContent;
+}));
 
-var includes$3 = getBuiltInPrototypeMethod$2("String", "includes"), isPrototypeOf = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype = Array.prototype, StringPrototype = String.prototype;
+Radio.displayName = "Radio";
 
-const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
-    var own = it.includes;
-    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
-})), SelectContext =  createContext(null), SelectOption =  memo((({value: value, children: children, disabled: disabled = !1, className: className = "", style: style}) => {
+const SelectContext =  createContext(null), SelectOption =  memo((({value: value, children: children, disabled: disabled = !1, className: className = "", style: style}) => {
     const context = useContext(SelectContext), label = "string" == typeof children ? children : value;
     // We assume children is the label if it's a string, or we need a way to get label.
     // For simplicity, we use children as label for registration if it's a string.
@@ -2476,7 +3490,10 @@ const Select =  memo((({options: options, value: value, onChange: onChange, onBl
         };
     }), []);
     // Toggle dropdown
-    const handleItemClick = 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 = 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
@@ -2520,7 +3537,15 @@ const Select =  memo((({options: options, value: value, onChange: onChange, onBl
                 "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 && jsx("option", {
                     value: "",
@@ -2533,11 +3558,29 @@ const Select =  memo((({options: options, value: value, onChange: onChange, onBl
                 }, option.value))) ]
             }), jsx("div", {
                 className: SELECT_CLASSES_SELECTED,
-                onClick: () => {
-                    disabled || (!isOpen && bodyRef.current && panelRef.current ? bodyRef.current.style.height = `${panelRef.current.clientHeight}px` : bodyRef.current && (bodyRef.current.style.height = "0px"), 
-                    setIsOpen(!isOpen));
+                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
             }), jsx("i", {
                 className: `${SELECT_CLASSES_ICON_CARET} ${SELECT_CLASSES_TOGGLE_ICON}`
@@ -2552,10 +3595,16 @@ const Select =  memo((({options: options, value: value, onChange: onChange, onBl
                     ref: panelRef,
                     children: jsx("ul", {
                         className: SELECT_CLASSES_SELECT_ITEMS,
+                        role: "listbox",
+                        id: id ? `${id}-listbox` : void 0,
+                        "aria-labelledby": id,
                         children: hasOptionsProp ? options.map(((option, index) => 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: jsxs("label", {
                                 htmlFor: `SelectItem${index}`,
                                 className: "c-checkbox",
@@ -2979,7 +4028,9 @@ const smoothStep = (a, b, t) => {
             return this.canvasDPI;
         }
     },
-    fragmentShaders: fragmentShaders
+    createFBMEngine: createFBMEngine,
+    fragmentShaders: fragmentShaders,
+    liquidGlassWithTime: liquidGlassWithTime
 }, Symbol.toStringTag, {
     value: "Module"
 }));