@shohojdhara/atomix 0.4.4 → 0.4.6

package/dist/index.js

@@ -1753,7 +1753,9 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         ENABLE_OVER_LIGHT_LAYERS: !0
     },
     CONSTANTS: {
-        ACTIVATION_ZONE: 200,
+        ACTIVATION_ZONE: 350,
+        LERP_FACTOR: .08,
+        SMOOTHSTEP_POWER: 2.5,
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
@@ -2048,7 +2050,7 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
         // Silently handle errors
     }
     return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-}, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+}, 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) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -2221,7 +2223,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
 }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, 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, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
     // Use a module-level counter that's consistent across server and client
     const filterId = React.useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
@@ -2408,21 +2410,12 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
         onClick: onClick,
         children: jsxRuntime.jsxs("div", {
             className: ATOMIX_GLASS.INNER_CLASS,
-            style: {
-                padding: "var(--atomix-glass-container-padding)",
-                boxShadow: "var(--atomix-glass-container-box-shadow)"
-            },
             onMouseEnter: onMouseEnter,
             onMouseLeave: onMouseLeave,
             onMouseDown: onMouseDown,
             onMouseUp: onMouseUp,
             children: [ jsxRuntime.jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
-                style: {
-                    zIndex: 1,
-                    position: "absolute",
-                    inset: 0
-                },
                 children: [ jsxRuntime.jsx(GlassFilter, {
                     blurAmount: blurAmount,
                     mode: mode,
@@ -2437,28 +2430,14 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                     },
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
-                        filter: `url(#${filterId})`,
-                        backdropFilter: "var(--atomix-glass-container-backdrop)",
-                        borderRadius: "var(--atomix-glass-container-radius)"
+                        filter: `url(#${filterId})`
                     }
                 }), jsxRuntime.jsx("div", {
-                    className: ATOMIX_GLASS.FILTER_SHADOW_CLASS,
-                    style: {
-                        boxShadow: "var(--atomix-glass-container-shadow)",
-                        opacity: "var(--atomix-glass-container-shadow-opacity)",
-                        background: "var(--atomix-glass-container-bg)",
-                        borderRadius: "var(--atomix-glass-container-radius)"
-                    }
+                    className: ATOMIX_GLASS.FILTER_SHADOW_CLASS
                 }) ]
             }), jsxRuntime.jsx("div", {
                 ref: contentRef,
                 className: ATOMIX_GLASS.CONTENT_CLASS,
-                style: {
-                    position: "relative",
-                    textShadow: "var(--atomix-glass-container-text-shadow)",
-                    // Ensure content is always above the filter layer (zIndex 1)
-                    zIndex: elasticity > 0 ? 100 : 2
-                },
                 children: children
             }) ]
         })
@@ -2562,31 +2541,39 @@ class {
         saturationBoost: baseOverLightConfig.saturationBoost
     };
     // Calculate mouse influence
-        // Calculate elastic translation
-    let elasticTranslation = {
+        let computedDirectionalScale = directionalScale, elasticTranslation = {
         x: 0,
         y: 0
     };
-    if (!effectiveWithoutEffects && wrapperElement) {
+    // Calculate elastic translation and directional scale
+        if (!effectiveWithoutEffects && wrapperElement) {
         const rect = wrapperElement.getBoundingClientRect(), center = calculateElementCenter(rect);
-        // Calculate fade in factor
-        let fadeInFactor = 0;
+        // Mouse presence and edge distance logic
         if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
-            const edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
+            const deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
                 x: edgeDistanceX,
                 y: edgeDistanceY
             }, {
                 x: 0,
                 y: 0
-            });
-            fadeInFactor = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
+            }), rawT = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE, fadeInFactor = (t => {
+                const clamped = Math.max(0, Math.min(1, t));
+                return clamped * clamped * (3 - 2 * clamped);
+            })(rawT);
+            // Directional scale
+            if (elasticTranslation = {
+                x: deltaX * elasticity * .1 * fadeInFactor,
+                y: deltaY * elasticity * .1 * fadeInFactor
+            }, !isOverLight && edgeDistance <= ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE) {
+                const centerDistance = calculateDistance(globalMousePosition, center);
+                if (centerDistance > 0) {
+                    const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * rawT, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15, softScaleX = 1 - softClamp(Math.max(0, 1 - scaleX), .2), softScaleY = 1 - softClamp(Math.max(0, 1 - scaleY), .2);
+                    computedDirectionalScale = `scaleX(${Math.max(.85, softScaleX)}) scaleY(${Math.max(.85, softScaleY)})`;
+                }
+            }
         }
-        elasticTranslation = {
-            x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
-            y: (globalMousePosition.y - center.y) * elasticity * .1 * fadeInFactor
-        };
     }
-    const transformStyle = effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : directionalScale}`;
+    const transformStyle = effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : computedDirectionalScale}`;
     // Update Wrapper Styles (glassVars)
         if (wrapperElement) {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, 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 ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
@@ -2693,7 +2680,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), internalMouseOffsetRef = React.useRef({
         x: 0,
         y: 0
-    }), [dynamicBorderRadius, setDynamicCornerRadius] = React.useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), effectiveBorderRadius = React.useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), targetMouseOffsetRef = React.useRef({
+        x: 0,
+        y: 0
+    }), targetGlobalMousePositionRef = React.useRef({
+        x: 0,
+        y: 0
+    }), lerpRafRef = React.useRef(null), lerpActiveRef = React.useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = React.useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), effectiveBorderRadius = React.useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = React.useState({
             width: 270,
             height: 69
@@ -2790,7 +2783,23 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         const timeoutId = setTimeout(extractRadius, 100);
         return () => clearTimeout(timeoutId);
     }), [ children, debugBorderRadius, contentRef ]), 
-    // Media query handlers and background detection
+    // Media query detection for reduced motion and high contrast
+    React.useEffect((() => {
+        if ("undefined" == typeof window || "function" != typeof window.matchMedia) return;
+        const mediaQueryReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"), mediaQueryHighContrast = window.matchMedia("(prefers-contrast: high)");
+        setUserPrefersReducedMotion(mediaQueryReducedMotion.matches), setUserPrefersHighContrast(mediaQueryHighContrast.matches);
+        const handleReducedMotionChange = e => {
+            setUserPrefersReducedMotion(e.matches);
+        }, handleHighContrastChange = e => {
+            setUserPrefersHighContrast(e.matches);
+        };
+        return mediaQueryReducedMotion.addEventListener("change", handleReducedMotionChange), 
+        mediaQueryHighContrast.addEventListener("change", handleHighContrastChange), () => {
+            mediaQueryReducedMotion.removeEventListener("change", handleReducedMotionChange), 
+            mediaQueryHighContrast.removeEventListener("change", handleHighContrastChange);
+        };
+    }), []), 
+    // Background detection for overLight auto-detect
     React.useEffect((() => {
         if (("auto" === overLight || "object" == typeof overLight && null !== overLight) && glassRef.current) {
             const element = glassRef.current, cachedResult = ((parentElement, overLightConfig) => {
@@ -2890,102 +2899,36 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), 150);
             return () => clearTimeout(timeoutId);
         }
-        if ("boolean" == typeof overLight && setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
-            const mediaQueryReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"), mediaQueryHighContrast = window.matchMedia("(prefers-contrast: high)");
-            setUserPrefersReducedMotion(mediaQueryReducedMotion.matches), setUserPrefersHighContrast(mediaQueryHighContrast.matches);
-            const handleReducedMotionChange = e => {
-                setUserPrefersReducedMotion(e.matches);
-            }, handleHighContrastChange = e => {
-                setUserPrefersHighContrast(e.matches);
-            };
-            return mediaQueryReducedMotion.addEventListener ? (mediaQueryReducedMotion.addEventListener("change", handleReducedMotionChange), 
-            mediaQueryHighContrast.addEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.addListener && (mediaQueryReducedMotion.addListener(handleReducedMotionChange), 
-            mediaQueryHighContrast.addListener(handleHighContrastChange)), () => {
-                // ignore
-            };
-        } catch (error) {
-            return;
-        }
-    }), [ overLight, glassRef, debugOverLight ]);
+        "boolean" == typeof overLight && setDetectedOverLight(!1);
+    }), [ overLight, glassRef ]);
     /**
    * Get effective overLight value based on configuration
    */
-    const getEffectiveOverLight = React.useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = React.useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), baseOverLightConfig = React.useMemo((() => {
-        const isOverLight = getEffectiveOverLight(), baseConfig = {
+    const getEffectiveOverLight = React.useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = React.useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = React.useMemo((() => {
+        const isOverLight = getEffectiveOverLight(), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
             isOverLight: isOverLight,
             threshold: .7,
-            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5)) : 0,
-            contrast: 1,
-            // Base contrast
-            brightness: 1,
-            // Base brightness
+            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
+            contrast: 1.4,
+            brightness: .9,
             saturationBoost: 1.3,
+            // Fixed value — dynamic saturation amplifies perceived displacement
             shadowIntensity: .9,
             borderOpacity: .7
         };
         if ("object" == typeof overLight && null !== overLight) {
-            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost);
-            return {
+            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), finalConfig = {
                 ...baseConfig,
                 threshold: validatedThreshold,
-                opacity: validatedOpacity,
+                opacity: validatedOpacity * hoverIntensity * activeIntensity,
                 contrast: validatedContrast,
                 brightness: validatedBrightness,
                 saturationBoost: validatedSaturationBoost
             };
+            return "undefined" == typeof process || process.env, finalConfig;
         }
-        return baseConfig;
-    }), [ overLight, getEffectiveOverLight, validateConfigValue ]), overLightConfig = React.useMemo((() => {
-        const mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1;
-        return {
-            isOverLight: baseOverLightConfig.isOverLight,
-            threshold: baseOverLightConfig.threshold,
-            opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
-            contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
-            brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
-            saturationBoost: baseOverLightConfig.saturationBoost,
-            shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence))
-        };
-    }), [ baseOverLightConfig, mouseOffset, isHovered, isActive ]), updateRectRef = React.useRef(null), calculateDirectionalScale = React.useCallback((() => {
-        if (baseOverLightConfig.isOverLight) return "scale(1)";
-        if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return "scale(1)";
-        const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
-            x: edgeDistanceX,
-            y: edgeDistanceY
-        }, {
-            x: 0,
-            y: 0
-        });
-        if (edgeDistance > CONSTANTS.ACTIVATION_ZONE) return "scale(1)";
-        const fadeInFactor = 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE, centerDistance = calculateDistance(globalMousePosition, center);
-        if (0 === centerDistance) return "scale(1)";
-        const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15;
-        return `scaleX(${Math.max(.8, scaleX)}) scaleY(${Math.max(.8, scaleY)})`;
-    }), [ globalMousePosition, elasticity, glassSize, glassRef, baseOverLightConfig ]), calculateFadeInFactor = React.useCallback((() => {
-        if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return 0;
-        const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
-            x: edgeDistanceX,
-            y: edgeDistanceY
-        }, {
-            x: 0,
-            y: 0
-        });
-        return edgeDistance > CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
-    }), [ globalMousePosition, glassSize, glassRef ]), calculateElasticTranslation = React.useCallback((() => {
-        if (!glassRef.current) return {
-            x: 0,
-            y: 0
-        };
-        const fadeInFactor = calculateFadeInFactor(), rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect);
-        return {
-            x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
-            y: (globalMousePosition.y - center.y) * elasticity * .1 * fadeInFactor
-        };
-    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = React.useMemo((() => effectiveWithoutEffects ? {
-        x: 0,
-        y: 0
-    } : calculateElasticTranslation()), [ calculateElasticTranslation, effectiveWithoutEffects ]), directionalScale = React.useMemo((() => effectiveWithoutEffects ? "scale(1)" : calculateDirectionalScale()), [ calculateDirectionalScale, effectiveWithoutEffects ]), transformStyle = React.useMemo((() => effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : directionalScale}`), [ elasticTranslation, isActive, onClick, directionalScale, effectiveWithoutEffects ]), handleGlobalMousePosition = React.useCallback((globalPos => {
+        return "undefined" == typeof process || process.env, baseConfig;
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = React.useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = React.useRef(null), handleGlobalMousePosition = React.useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const container = mouseContainer?.current || glassRef.current;
@@ -2994,35 +2937,61 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 let rect = cachedRectRef.current;
         if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
         cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
-        const center = calculateElementCenter(rect), newOffset = {
+        const center = calculateElementCenter(rect);
+        // Write raw target — the lerp loop will smoothly pursue it
+                targetMouseOffsetRef.current = {
             x: (globalPos.x - center.x) / rect.width * 100,
             y: (globalPos.y - center.y) / rect.height * 100
+        }, targetGlobalMousePositionRef.current = globalPos;
+    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), startLerpLoop = React.useCallback((() => {
+        if (lerpActiveRef.current) return;
+        lerpActiveRef.current = !0;
+        const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
+            if (!lerpActiveRef.current) return;
+            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 = {
+                ...tgt
+            }, internalGlobalMousePositionRef.current = {
+                ...targetGlobalMousePositionRef.current
+            }; else {
+                internalMouseOffsetRef.current = {
+                    x: lerp(cur.x, tgt.x, LERP_T),
+                    y: lerp(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)
+                };
+            }
+            // Imperative style update with the smoothed values
+                        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+                mouseOffset: internalMouseOffsetRef.current,
+                globalMousePosition: internalGlobalMousePositionRef.current,
+                glassSize: glassSize,
+                isHovered: isHovered,
+                isActive: isActive,
+                isOverLight: overLightConfig.isOverLight,
+                baseOverLightConfig: overLightConfig,
+                effectiveBorderRadius: effectiveBorderRadius,
+                effectiveWithoutEffects: effectiveWithoutEffects,
+                effectiveReducedMotion: effectiveReducedMotion,
+                elasticity: elasticity,
+                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
+                onClick: onClick,
+                withLiquidBlur: withLiquidBlur,
+                blurAmount: blurAmount,
+                saturation: saturation,
+                padding: padding
+            }), lerpRafRef.current = requestAnimationFrame(tick);
         };
-        // Calculate offset relative to this container
-                // Store in refs instead of state
-        internalMouseOffsetRef.current = newOffset, internalGlobalMousePositionRef.current = globalPos, 
-        // Imperative style update
-        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
-            mouseOffset: newOffset,
-            globalMousePosition: globalPos,
-            glassSize: glassSize,
-            isHovered: isHovered,
-            isActive: isActive,
-            isOverLight: baseOverLightConfig.isOverLight,
-            baseOverLightConfig: baseOverLightConfig,
-            effectiveBorderRadius: effectiveBorderRadius,
-            effectiveWithoutEffects: effectiveWithoutEffects,
-            effectiveReducedMotion: effectiveReducedMotion,
-            elasticity: elasticity,
-            directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
-            // Simplified directional scale for fast path
-            onClick: onClick,
-            withLiquidBlur: withLiquidBlur,
-            blurAmount: blurAmount,
-            saturation: saturation,
-            padding: padding
-        });
-    }), [ mouseContainer, glassRef, wrapperRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects, glassSize, isHovered, isActive, baseOverLightConfig, effectiveBorderRadius, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding ]);
+ // 0.08 – lower = more viscous
+                lerpRafRef.current = requestAnimationFrame(tick);
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding ]), stopLerpLoop = React.useCallback((() => {
+        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
+        lerpRafRef.current = null);
+    }), []);
     /**
    * Validate and clamp a numeric config value
    */    
@@ -3030,7 +2999,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     React.useEffect((() => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
-        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), container = mouseContainer?.current || glassRef.current;
+        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
+        // Start the lerp loop — it will smoothly chase the target
+                startLerpLoop();
+        const container = mouseContainer?.current || glassRef.current;
         let resizeObserver = null;
         return container && "undefined" != typeof ResizeObserver && (resizeObserver = new ResizeObserver((() => {
             null !== updateRectRef.current && cancelAnimationFrame(updateRectRef.current), updateRectRef.current = requestAnimationFrame((() => {
@@ -3038,10 +3010,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
             }));
         })), resizeObserver.observe(container)), () => {
-            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
+            unsubscribe(), stopLerpLoop(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
             updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
         };
-    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
+    }), [ handleGlobalMousePosition, startLerpLoop, stopLerpLoop, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
     // Also call updateStyles on other state changes (hover, active, etc)
     React.useEffect((() => {
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
@@ -3050,22 +3022,22 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             glassSize: glassSize,
             isHovered: isHovered,
             isActive: isActive,
-            isOverLight: baseOverLightConfig.isOverLight,
-            baseOverLightConfig: baseOverLightConfig,
+            isOverLight: overLightConfig.isOverLight,
+            baseOverLightConfig: overLightConfig,
             effectiveBorderRadius: effectiveBorderRadius,
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             elasticity: elasticity,
-            directionalScale: directionalScale,
+            directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
             onClick: onClick,
             withLiquidBlur: withLiquidBlur,
             blurAmount: blurAmount,
             saturation: saturation,
             padding: padding
         });
-    }), [ isHovered, isActive, glassSize, baseOverLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, directionalScale, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, padding, onClick ]);
+    }), [ isHovered, isActive, glassSize, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, padding, onClick ]);
     // Event handlers
-    const handleMouseEnter = React.useCallback((() => setIsHovered(!0)), []), handleMouseLeave = React.useCallback((() => setIsHovered(!1)), []), handleMouseDown = React.useCallback((() => setIsActive(!0)), []), handleMouseUp = React.useCallback((() => setIsActive(!1)), []), handleMouseMove = React.useCallback((_e => {}), []), handleKeyDown = React.useCallback((e => {
+    const handleMouseEnter = React.useCallback((() => setIsHovered(!0)), []), handleMouseLeave = React.useCallback((() => setIsHovered(!1)), []), handleMouseDown = React.useCallback((() => setIsActive(!0)), []), handleMouseUp = React.useCallback((() => setIsActive(!1)), []), handleKeyDown = React.useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
     }), [ onClick ]);
     return {
@@ -3083,14 +3055,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         mouseOffset: mouseOffset,
         // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
-        elasticTranslation: elasticTranslation,
-        directionalScale: directionalScale,
         transformStyle: transformStyle,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
         handleMouseUp: handleMouseUp,
-        handleMouseMove: handleMouseMove,
         handleKeyDown: handleKeyDown
     };
 }
@@ -3188,25 +3157,56 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         withLiquidBlur: withLiquidBlur,
         padding: padding,
         style: style
-    }), isOverLight = React.useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, baseStyle = {
-        ...style,
-        ...!effectiveWithoutEffects && {
-            transform: transformStyle
+    }), isOverLight = React.useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, rootLayoutStyle = React.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 ]), baseStyle = React.useMemo((() => {
+        if (isFixedOrSticky) {
+            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
+            return {
+                ...visualStyle,
+                ...!effectiveWithoutEffects && {
+                    transform: transformStyle
+                }
+            };
         }
-    }, 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 = React.useMemo((() => ({
-        position: style.position || "absolute",
-        top: style.top || 0,
-        left: style.left || 0
-    })), [ style.position, style.top, style.left ]), adjustedSize = React.useMemo((() => {
+        return {
+            ...restStyle,
+            ...!effectiveWithoutEffects && {
+                transform: transformStyle
+            }
+        };
+    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]), 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 = React.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 = React.useMemo((() => {
         const resolveSize = (propValue, styleValue, measuredSize) => {
             const explicitSize = propValue ?? styleValue;
             return void 0 !== explicitSize ? "number" == typeof explicitSize ? `${explicitSize}px` : explicitSize : "fixed" === positionStyles.position ? `${Math.max(measuredSize, 0)}px` : "100%";
         };
         return {
-            width: resolveSize(width, style.width, glassSize.width),
-            height: resolveSize(height, style.height, glassSize.height)
+            width: resolveSize(width, restStyle.width, glassSize.width),
+            height: resolveSize(height, restStyle.height, glassSize.height)
         };
-    }), [ width, height, style.width, style.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = React.useMemo((() => {
+    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = React.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,
@@ -3248,6 +3248,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = React.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",
             "--atomix-glass-position": positionStyles.position,
@@ -3268,22 +3271,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             "--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-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, positionStyles, adjustedSize, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsxRuntime.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(" "),
-        style: {
-            ...positionStyles,
-            height: adjustedSize.height,
-            width: adjustedSize.width,
-            borderRadius: `${effectiveBorderRadius}px`,
-            transform: baseStyle.transform
-        }
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, positionStyles, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex ]), renderBackgroundLayer = layerType => jsxRuntime.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(" ")
     });
     return jsxRuntime.jsxs("div", {
         ...rest,
         className: componentClassName,
-        style: glassVars,
+        style: {
+            ...glassVars
+        },
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
@@ -3295,7 +3295,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             ref: glassRef,
             contentRef: contentRef,
             className: className,
-            style: baseStyle,
+            style: rootLayoutStyle,
             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,
@@ -3330,7 +3330,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
-            elasticity: elasticity,
             withLiquidBlur: withLiquidBlur,
             children: children
         }), Boolean(onClick) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -3347,11 +3346,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), jsxRuntime.jsx("div", {
                 className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
             }), jsxRuntime.jsx("div", {
-                className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS,
-                style: {
-                    opacity: opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
-                    background: `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}%)`
-                }
+                className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS
             }) ]
         }), withBorder && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("span", {
@@ -4124,7 +4119,7 @@ const BreadcrumbItem =  React.forwardRef((({children: children, href: href, acti
 
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
-const Breadcrumb =  React.memo((function({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style, children: children}) {
+const Breadcrumb =  React.memo((function({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", linkComponent: linkComponent, style: style, children: children}) {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
     let content;
     if (items && items.length > 0) 
@@ -4138,7 +4133,7 @@ const Breadcrumb =  React.memo((function({items: items, divider: divider, classN
             onClick: item.onClick,
             className: item.className,
             style: item.style,
-            linkAs: LinkComponent,
+            linkAs: linkComponent,
             children: item.label
         }, index);
     })); else {
@@ -4148,7 +4143,7 @@ const Breadcrumb =  React.memo((function({items: items, divider: divider, classN
             if ( React.isValidElement(child)) {
                 const isLast = index === childrenCount - 1, childProps = child.props, {active: active, linkAs: linkAs, ...otherProps} = childProps, newProps = {
                     active: active ?? (!!isLast || void 0),
-                    linkAs: linkAs ?? LinkComponent
+                    linkAs: linkAs ?? linkComponent
                 };
                 
                 return React.cloneElement(child, newProps);
@@ -4324,7 +4319,7 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -4375,12 +4370,12 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
         let content;
     // Render as anchor if href is provided
         if (shouldRenderAsLink) 
-    // Use custom LinkComponent if provided (e.g., Next.js Link)
-    if (LinkComponent) {
-        const LinkComp = LinkComponent, linkProps = {
+    // Use custom linkComponent if provided (e.g., Next.js Link)
+    if (linkComponent) {
+        const LinkComp = linkComponent, linkProps = {
             ...buttonProps,
             ref: ref,
-            // LinkComponent usually forwards ref to anchor
+            // linkComponent usually forwards ref to anchor
             href: href,
             to: href,
             target: target,
@@ -4678,7 +4673,7 @@ header: header, image: image, imageAlt: imageAlt = "", title: title, text: text,
 // Interaction
 onClick: onClick, onHover: onHover, onFocus: onFocus, href: href, target: target, 
 // Custom Link
-LinkComponent: LinkComponent, 
+linkComponent: linkComponent, 
 // Glass
 glass: glass, 
 // Accessibility
@@ -4763,8 +4758,8 @@ className: className = "", style: style, ...rest}, ref) => {
     // Render as anchor if href is provided
     if (href && !isDisabled) {
         let anchorElement;
-        if (LinkComponent) {
-            const LinkComp = LinkComponent;
+        if (linkComponent) {
+            const LinkComp = linkComponent;
             anchorElement = jsxRuntime.jsx(LinkComp, {
                 ...commonProps,
                 ref: ref,
@@ -9869,7 +9864,7 @@ DropdownTrigger.displayName = "DropdownTrigger";
 /**
  * DropdownItem component for menu items
  */
-const DropdownItem =  React.memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
+const DropdownItem =  React.memo((({children: children, href: href, target: target, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", linkComponent: linkComponent, ...props}) => {
     const {close: close} = React.useContext(DropdownContext), handleClick = e => {
         disabled ? e.preventDefault() : (onClick && onClick(e), 
         // Always close the dropdown when an item is clicked
@@ -9877,6 +9872,7 @@ const DropdownItem =  React.memo((({children: children, href: href, active: acti
     }, itemClasses = [ "c-dropdown__menu-item", active ? "is-active" : "", disabled ? "is-disabled" : "", className ].filter(Boolean).join(" "), linkProps = {
         href: href,
         to: href,
+        target: target,
         className: itemClasses,
         onClick: handleClick,
         role: "menuitem",
@@ -9884,8 +9880,8 @@ const DropdownItem =  React.memo((({children: children, href: href, active: acti
         ...props
     };
     return href && !disabled ? jsxRuntime.jsx("li", {
-        children: LinkComponent ? (() => {
-            const Component = LinkComponent;
+        children: linkComponent ? (() => {
+            const Component = linkComponent;
             return jsxRuntime.jsxs(Component, {
                 ...linkProps,
                 children: [ icon && jsxRuntime.jsx("span", {
@@ -12376,96 +12372,6 @@ const DEFAULT_ATOMIX_FONTS = [ {
     };
 }
 
-/**
- * Custom hook for managing GlassContainer state and interactions
- */ function useGlassContainer(props) {
-    const {glassSize: glassSize = {
-        width: 270,
-        height: 69
-    }, elasticity: elasticity = .15, mouseContainer: mouseContainer, globalMousePos: externalGlobalMousePos, mouseOffset: externalMouseOffset} = props, filterId = React.useId(), glassRef = React.useRef(null), [isHovered, setIsHovered] = React.useState(!1), [isActive, setIsActive] = React.useState(!1), [currentGlassSize, setCurrentGlassSize] = React.useState(glassSize), [internalGlobalMousePos, setInternalGlobalMousePos] = React.useState({
-        x: 0,
-        y: 0
-    }), [internalMouseOffset, setInternalMouseOffset] = React.useState({
-        x: 0,
-        y: 0
-    }), globalMousePos = externalGlobalMousePos || internalGlobalMousePos, mouseOffset = externalMouseOffset || internalMouseOffset, handleMouseMove = React.useCallback((e => {
-        const container = mouseContainer?.current || glassRef.current;
-        if (!container) return;
-        const rect = container.getBoundingClientRect(), centerX = rect.left + rect.width / 2, centerY = rect.top + rect.height / 2;
-        setInternalMouseOffset({
-            x: (e.clientX - centerX) / rect.width * 100,
-            y: (e.clientY - centerY) / rect.height * 100
-        }), setInternalGlobalMousePos({
-            x: e.clientX,
-            y: e.clientY
-        });
-    }), [ mouseContainer ]);
-    // Set up mouse tracking if no external mouse position is provided
-    React.useEffect((() => {
-        if (externalGlobalMousePos && externalMouseOffset) return;
-        const container = mouseContainer?.current || glassRef.current;
-        return container ? (container.addEventListener("mousemove", handleMouseMove), () => container.removeEventListener("mousemove", handleMouseMove)) : void 0;
-    }), [ handleMouseMove, mouseContainer, externalGlobalMousePos, externalMouseOffset ]);
-    // Calculate directional scaling based on mouse position
-    const calculateDirectionalScale = React.useCallback((() => {
-        if (!globalMousePos.x || !globalMousePos.y || !glassRef.current) return "scale(1)";
-        const rect = glassRef.current.getBoundingClientRect(), pillCenterX = rect.left + rect.width / 2, pillCenterY = rect.top + rect.height / 2, pillWidth = currentGlassSize.width, pillHeight = currentGlassSize.height, deltaX = globalMousePos.x - pillCenterX, deltaY = globalMousePos.y - pillCenterY, edgeDistanceX = Math.max(0, Math.abs(deltaX) - pillWidth / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - pillHeight / 2), edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
-        if (edgeDistance > 200) return "scale(1)";
-        const fadeInFactor = 1 - edgeDistance / 200, centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-        if (0 === centerDistance) return "scale(1)";
-        const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15;
-        return `scaleX(${Math.max(.8, scaleX)}) scaleY(${Math.max(.8, scaleY)})`;
-    }), [ globalMousePos, elasticity, currentGlassSize ]), calculateElasticTranslation = React.useCallback((() => {
-        if (!glassRef.current) return {
-            x: 0,
-            y: 0
-        };
-        const rect = glassRef.current.getBoundingClientRect(), pillCenterX = rect.left + rect.width / 2, pillCenterY = rect.top + rect.height / 2, pillWidth = currentGlassSize.width, pillHeight = currentGlassSize.height, edgeDistanceX = Math.max(0, Math.abs(globalMousePos.x - pillCenterX) - pillWidth / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePos.y - pillCenterY) - pillHeight / 2), edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY), fadeInFactor = edgeDistance > 200 ? 0 : 1 - edgeDistance / 200;
-        return {
-            x: (globalMousePos.x - pillCenterX) * elasticity * .1 * fadeInFactor,
-            y: (globalMousePos.y - pillCenterY) * elasticity * .1 * fadeInFactor
-        };
-    }), [ globalMousePos, elasticity, currentGlassSize ]);
-    // Calculate elastic translation
-        // Update glass size
-    React.useEffect((() => {
-        const updateGlassSize = () => {
-            if (glassRef.current) {
-                const rect = glassRef.current.getBoundingClientRect();
-                setCurrentGlassSize({
-                    width: rect.width,
-                    height: rect.height
-                });
-            }
-        };
-        return updateGlassSize(), window.addEventListener("resize", updateGlassSize), () => window.removeEventListener("resize", updateGlassSize);
-    }), []);
-    const handleMouseEnter = React.useCallback((() => {
-        setIsHovered(!0);
-    }), []), handleMouseLeave = React.useCallback((() => {
-        setIsHovered(!1);
-    }), []), handleMouseDown = React.useCallback((() => {
-        setIsActive(!0);
-    }), []), handleMouseUp = React.useCallback((() => {
-        setIsActive(!1);
-    }), []);
-    return {
-        filterId: filterId,
-        glassRef: glassRef,
-        isHovered: isHovered,
-        isActive: isActive,
-        currentGlassSize: currentGlassSize,
-        globalMousePos: globalMousePos,
-        mouseOffset: mouseOffset,
-        calculateDirectionalScale: calculateDirectionalScale,
-        calculateElasticTranslation: calculateElasticTranslation,
-        handleMouseEnter: handleMouseEnter,
-        handleMouseLeave: handleMouseLeave,
-        handleMouseDown: handleMouseDown,
-        handleMouseUp: handleMouseUp
-    };
-}
-
 /**
  * Radio state and functionality
  * @param initialProps - Initial radio properties
@@ -12614,7 +12520,7 @@ const DEFAULT_ATOMIX_FONTS = [ {
 }
 
 function useSlider(options) {
-    const {slides: slides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, containerRef = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.useRef({
+    const {slides: rawSlides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, slides = Array.isArray(rawSlides) ? rawSlides : [], containerRef = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.useRef({
         isTransitioning: !1,
         loop: loop,
         slides: slides,
@@ -12958,7 +12864,6 @@ var composablesImport =  Object.freeze({
     useEdgePanel: useEdgePanel,
     useForm: useForm,
     useFormGroup: useFormGroup,
-    useGlassContainer: useGlassContainer,
     useHero: useHero,
     useInput: useInput,
     useLineChart: useLineChart,
@@ -13314,7 +13219,60 @@ const Textarea =  React.memo( React.forwardRef((({value: value, defaultValue: de
 
 Textarea.displayName = "Textarea";
 
-/**
+// ─── Platform Maps ───────────────────────────────────────────────
+const PLATFORM_ICON_MAP = {
+    facebook: "FacebookLogo",
+    twitter: "TwitterLogo",
+    instagram: "InstagramLogo",
+    linkedin: "LinkedinLogo",
+    youtube: "YoutubeLogo",
+    github: "GithubLogo",
+    discord: "DiscordLogo",
+    tiktok: "TiktokLogo",
+    pinterest: "PinterestLogo",
+    snapchat: "SnapchatLogo",
+    whatsapp: "WhatsappLogo",
+    telegram: "TelegramLogo",
+    reddit: "RedditLogo",
+    twitch: "TwitchLogo",
+    spotify: "SpotifyLogo",
+    dribbble: "DribbbleLogo",
+    behance: "BehanceLogo",
+    medium: "MediumLogo",
+    dev: "DevToLogo",
+    codepen: "CodepenLogo"
+}, PLATFORM_LABEL_MAP = {
+    facebook: "Facebook",
+    twitter: "Twitter",
+    instagram: "Instagram",
+    linkedin: "LinkedIn",
+    youtube: "YouTube",
+    github: "GitHub",
+    discord: "Discord",
+    tiktok: "TikTok",
+    pinterest: "Pinterest",
+    snapchat: "Snapchat",
+    whatsapp: "WhatsApp",
+    telegram: "Telegram",
+    reddit: "Reddit",
+    twitch: "Twitch",
+    spotify: "Spotify",
+    dribbble: "Dribbble",
+    behance: "Behance",
+    medium: "Medium",
+    dev: "Dev.to",
+    codepen: "CodePen"
+}, getPlatformIcon = platform => {
+    const iconName = PLATFORM_ICON_MAP[platform];
+    return iconName ? jsxRuntime.jsx(Icon, {
+        name: iconName
+    }) : jsxRuntime.jsx(Icon, {
+        name: "Link"
+    });
+}, FooterSocialLink =  React.forwardRef((({platform: platform, url: url, icon: icon, label: label, size: size = "md", variant: variant = "default", disabled: disabled = !1, className: className = "", ...props}, ref) => {
+    const linkClass = [ "c-footer__social-link", `c-footer__social-link--${platform}`, `c-footer__social-link--${size}`, `c-footer__social-link--${variant}`, disabled && "c-footer__social-link--disabled", className ].filter(Boolean).join(" "), ariaLabel = label || `Follow us on ${(platform => PLATFORM_LABEL_MAP[platform] || platform)
+    // ─── Component ───────────────────────────────────────────────────
+    /**
  * FooterSocialLink component provides styled social media links with platform-specific icons.
  *
  * @example
@@ -13322,30 +13280,7 @@ Textarea.displayName = "Textarea";
  * <FooterSocialLink platform="twitter" url="https://twitter.com/company" />
  * <FooterSocialLink platform="custom" url="https://example.com" icon={<CustomIcon />} label="Custom Platform" />
  * ```
- */
-const FooterSocialLink =  React.forwardRef((({platform: platform, url: url, icon: icon, label: label, size: size = "md", variant: variant = "default", disabled: disabled = !1, className: className = "", ...props}, ref) => {
-    const linkClass = [ "c-footer__social-link", `c-footer__social-link--${platform}`, `c-footer__social-link--${size}`, `c-footer__social-link--${variant}`, disabled && "c-footer__social-link--disabled", className ].filter(Boolean).join(" "), ariaLabel = label || `Follow us on ${(platform => ({
-        facebook: "Facebook",
-        twitter: "Twitter",
-        instagram: "Instagram",
-        linkedin: "LinkedIn",
-        youtube: "YouTube",
-        github: "GitHub",
-        discord: "Discord",
-        tiktok: "TikTok",
-        pinterest: "Pinterest",
-        snapchat: "Snapchat",
-        whatsapp: "WhatsApp",
-        telegram: "Telegram",
-        reddit: "Reddit",
-        twitch: "Twitch",
-        spotify: "Spotify",
-        dribbble: "Dribbble",
-        behance: "Behance",
-        medium: "Medium",
-        dev: "Dev.to",
-        codepen: "CodePen"
-    }[platform] || platform))(platform)}`;
+ */ (platform)}`;
     return jsxRuntime.jsxs("a", {
         ref: ref,
         href: disabled ? void 0 : url,
@@ -13357,35 +13292,7 @@ const FooterSocialLink =  React.forwardRef((({platform: platform, url: url, icon
         ...props,
         children: [ jsxRuntime.jsx("span", {
             className: "c-footer__social-link-icon",
-            children: icon || (platform => {
-                const iconName = {
-                    facebook: "FacebookLogo",
-                    twitter: "TwitterLogo",
-                    instagram: "InstagramLogo",
-                    linkedin: "LinkedinLogo",
-                    youtube: "YoutubeLogo",
-                    github: "GithubLogo",
-                    discord: "DiscordLogo",
-                    tiktok: "TiktokLogo",
-                    pinterest: "PinterestLogo",
-                    snapchat: "SnapchatLogo",
-                    whatsapp: "WhatsappLogo",
-                    telegram: "TelegramLogo",
-                    reddit: "RedditLogo",
-                    twitch: "TwitchLogo",
-                    spotify: "SpotifyLogo",
-                    dribbble: "DribbbleLogo",
-                    behance: "BehanceLogo",
-                    medium: "MediumLogo",
-                    dev: "DevToLogo",
-                    codepen: "CodepenLogo"
-                }[platform];
-                return iconName ? jsxRuntime.jsx(Icon, {
-                    name: iconName
-                }) : jsxRuntime.jsx(Icon, {
-                    name: "Link"
-                });
-            })(platform)
+            children: icon || getPlatformIcon(platform)
         }), jsxRuntime.jsx("span", {
             className: "c-footer__social-link-label u-visually-hidden",
             children: ariaLabel
@@ -13508,17 +13415,83 @@ Row.displayName = "Row";
  * ```
  */
 const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDescription: brandDescription, copyright: copyright, layout: layout = "columns", variant: variant = "primary", size: size = "md", showNewsletter: showNewsletter = !1, newsletterTitle: newsletterTitle = "Stay Updated", newsletterDescription: newsletterDescription = "Subscribe to our newsletter for the latest updates.", newsletterPlaceholder: newsletterPlaceholder = "Enter your email", newsletterButtonText: newsletterButtonText = "Subscribe", onNewsletterSubmit: onNewsletterSubmit, socialLinks: socialLinks = [], showBackToTop: showBackToTop = !1, backToTopText: backToTopText = "Back to Top", onBackToTop: onBackToTop, showDivider: showDivider = !0, sticky: sticky = !1, children: children, className: className = "", disabled: disabled = !1, glass: glass, ...props}, ref) => {
-    const {footerClass: footerClass, containerClass: containerClass, brandClass: brandClass, sectionsClass: sectionsClass, bottomClass: bottomClass, handleNewsletterSubmit: handleNewsletterSubmit, handleBackToTop: handleBackToTop, socialLinks: footerSocialLinks} = function(options = {}) {
-        const {layout: layout = FOOTER.DEFAULTS.LAYOUT, variant: variant = FOOTER.DEFAULTS.VARIANT, size: size = FOOTER.DEFAULTS.SIZE, sticky: sticky = FOOTER.DEFAULTS.STICKY, showNewsletter: showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER, showBackToTop: showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP, socialLinks: socialLinks = [], onNewsletterSubmit: onNewsletterSubmit, onBackToTop: onBackToTop, className: className = ""} = options;
-        // Generate footer classes
+    const {footerClass: footerClass, containerClass: containerClass, brandClass: brandClass, sectionsClass: sectionsClass, bottomClass: bottomClass, getResponsiveColumnProps: getResponsiveColumnProps, handleNewsletterSubmit: handleNewsletterSubmit, handleBackToTop: handleBackToTop} = function(options = {}) {
+        const {layout: layout = FOOTER.DEFAULTS.LAYOUT, variant: variant = FOOTER.DEFAULTS.VARIANT, size: size = FOOTER.DEFAULTS.SIZE, sticky: sticky = FOOTER.DEFAULTS.STICKY, showNewsletter: showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER, showBackToTop: showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP, showDivider: showDivider = FOOTER.DEFAULTS.SHOW_DIVIDER, socialLinks: socialLinks = [], onNewsletterSubmit: onNewsletterSubmit, onBackToTop: onBackToTop, glass: glass = !1, className: className = ""} = options, footerClass = React.useMemo((() => {
+            const layoutKey = layout.toUpperCase(), sizeKey = size.toUpperCase();
+            return [ FOOTER.CLASSES.BASE, FOOTER.CLASSES[layoutKey] || FOOTER.CLASSES.COLUMNS, `c-footer--${variant}`, FOOTER.CLASSES[sizeKey] || FOOTER.CLASSES.MD, sticky && FOOTER.CLASSES.STICKY, showNewsletter && "c-footer--with-newsletter", glass && "c-footer--glass", className ].filter(Boolean).join(" ");
+        }), [ layout, variant, size, sticky, showNewsletter, glass, className ]), containerClass = FOOTER.CLASSES.CONTAINER, brandClass = FOOTER.CLASSES.BRAND, sectionsClass = React.useMemo((() => [ FOOTER.CLASSES.SECTIONS, "columns" === layout && "c-footer__sections--columns", "centered" === layout && "c-footer__sections--centered", "stacked" === layout && "c-footer__sections--stacked" ].filter(Boolean).join(" ")), [ layout ]), bottomClass = FOOTER.CLASSES.BOTTOM, columnSizes = React.useMemo((() => 
+        /**
+ * Resolves grid column size map for a given layout.
+ */
+        function(layout, showNewsletter) {
+            switch (layout) {
+              case "columns":
+              default:
+                return {
+                    brand: 4,
+                    content: showNewsletter ? 4 : 8,
+                    newsletter: showNewsletter ? 4 : 0
+                };
+
+              case "centered":
+              case "minimal":
+              case "stacked":
+                return {
+                    brand: 12,
+                    content: 12,
+                    newsletter: showNewsletter ? 12 : 0
+                };
+
+              case "flexible":
                 return {
-            footerClass: [ FOOTER.CLASSES.BASE, FOOTER.CLASSES[layout.toUpperCase()] || FOOTER.CLASSES.COLUMNS, `c-footer--${variant}`, FOOTER.CLASSES[size.toUpperCase()] || FOOTER.CLASSES.MD, sticky && FOOTER.CLASSES.STICKY, showNewsletter && "c-footer--with-newsletter", className ].filter(Boolean).join(" "),
-            containerClass: FOOTER.CLASSES.CONTAINER,
-            brandClass: FOOTER.CLASSES.BRAND,
-            sectionsClass: [ FOOTER.CLASSES.SECTIONS, "columns" === layout && "c-footer__sections--columns", "centered" === layout && "c-footer__sections--centered", "stacked" === layout && "c-footer__sections--stacked" ].filter(Boolean).join(" "),
-            bottomClass: FOOTER.CLASSES.BOTTOM,
+                    brand: "auto",
+                    content: "auto",
+                    newsletter: "auto"
+                };
+
+              case "sidebar":
+                return {
+                    brand: 3,
+                    content: 9,
+                    newsletter: showNewsletter ? 9 : 0
+                };
+
+              case "wide":
+                return {
+                    brand: 3,
+                    content: 6,
+                    newsletter: showNewsletter ? 3 : 0
+                };
+            }
+        }
+        /**
+ * Computes responsive GridCol props for a given column type.
+ */ (layout, showNewsletter)), [ layout, showNewsletter ]);
+        // ---------- CSS class strings ----------
+                return {
+            // Classes
+            footerClass: footerClass,
+            containerClass: containerClass,
+            brandClass: brandClass,
+            sectionsClass: sectionsClass,
+            bottomClass: bottomClass,
+            // Grid helpers
+            columnSizes: columnSizes,
+            getResponsiveColumnProps: columnType => function(columnType, layout, columnSizes) {
+                return "flexible" === layout && "auto" === columnSizes[columnType] ? {
+                    xs: 12,
+                    sm: !0,
+                    md: !0
+                } : {
+                    xs: 12,
+                    md: "columns" === layout || "sidebar" === layout || "wide" === layout ? columnSizes[columnType] : 12
+                };
+            }(columnType, layout, columnSizes)
+            // ---------- Handlers ----------
+            ,
+            // Handlers
             handleNewsletterSubmit: email => {
-                onNewsletterSubmit && onNewsletterSubmit(email);
+                onNewsletterSubmit?.(email);
             },
             handleBackToTop: () => {
                 onBackToTop ? onBackToTop() : window.scrollTo({
@@ -13526,8 +13499,11 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
                     behavior: "smooth"
                 });
             },
+            // Pass-through state
             socialLinks: socialLinks,
-            showNewsletter: showNewsletter
+            showNewsletter: showNewsletter,
+            showBackToTop: showBackToTop,
+            showDivider: showDivider
         };
     }({
         layout: layout,
@@ -13536,73 +13512,19 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
         sticky: sticky,
         showNewsletter: showNewsletter,
         showBackToTop: showBackToTop,
+        showDivider: showDivider,
         socialLinks: socialLinks,
         onNewsletterSubmit: onNewsletterSubmit,
         onBackToTop: onBackToTop,
+        glass: Boolean(glass),
         className: className
-    }), columnSizes = (() => {
-        switch (layout) {
-          case "columns":
-          default:
-            return {
-                brand: 4,
-                content: showNewsletter ? 4 : 8,
-                newsletter: showNewsletter ? 4 : 0
-            };
-
-          case "centered":
-          case "minimal":
-          case "stacked":
-            // For stacked layout, everything takes full width but stacked vertically
-            return {
-                brand: 12,
-                content: 12,
-                newsletter: showNewsletter ? 12 : 0
-            };
-
-          case "flexible":
-            // For flexible layout, adjust based on content
-            return {
-                brand: "auto",
-                content: "auto",
-                newsletter: "auto"
-            };
-
-          case "sidebar":
-            // For sidebar layout, brand on left, content and newsletter on right
-            return {
-                brand: 3,
-                content: 9,
-                newsletter: showNewsletter ? 9 : 0
-            };
-
-          case "wide":
-            // For wide layout, content takes more space
-            return {
-                brand: 3,
-                content: 6,
-                newsletter: showNewsletter ? 3 : 0
-            };
-        }
-    })(), getResponsiveColumnProps = columnType => {
-        const baseMd = "columns" === layout || "sidebar" === layout || "wide" === layout ? columnSizes[columnType] : 12;
-        // For flexible layout, we want auto-sizing
-                return "flexible" === layout && "auto" === columnSizes[columnType] ? {
-            xs: 12,
-            sm: !0,
-            md: !0
-        } : {
-            xs: 12,
-            md: baseMd
-        };
-        // For other layouts, we use specific sizes
-        }, footerContent = jsxRuntime.jsxs("div", {
+    }), footerContent = jsxRuntime.jsxs("div", {
         className: containerClass,
         children: [ jsxRuntime.jsxs(Grid, {
             className: sectionsClass,
             alignItems: "start",
             justifyContent: "centered" === layout ? "center" : void 0,
-            children: [ (brand || brandLogo || brandDescription) && jsxRuntime.jsxs(GridCol, {
+            children: [ brand || brandLogo || brandDescription ? jsxRuntime.jsxs(GridCol, {
                 ...getResponsiveColumnProps("brand"),
                 className: brandClass,
                 children: [ brandLogo && jsxRuntime.jsx("div", {
@@ -13630,19 +13552,17 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
                         size: size
                     }, `${link.platform}-${index}`)))
                 }) ]
-            }), children && jsxRuntime.jsx(GridCol, {
+            }) : null, children ? jsxRuntime.jsx(GridCol, {
                 ...getResponsiveColumnProps("content"),
                 className: "c-footer__content",
                 children: jsxRuntime.jsx(Grid, {
                     className: "c-footer__sections",
                     alignItems: "centered" === layout || "stacked" === layout ? "center" : void 0,
-                    children: React__default.default.Children.map(children, (child => 
-                    // Check if the child is a valid React element
-                     React__default.default.isValidElement(child) ?  React__default.default.cloneElement(child, {
+                    children: React__default.default.Children.map(children, (child =>  React__default.default.isValidElement(child) ?  React__default.default.cloneElement(child, {
                         showNewsletter: showNewsletter
                     }) : child))
                 })
-            }), showNewsletter && jsxRuntime.jsxs(GridCol, {
+            }) : null, showNewsletter ? jsxRuntime.jsxs(GridCol, {
                 ...getResponsiveColumnProps("newsletter"),
                 className: "c-footer__newsletter",
                 children: [ jsxRuntime.jsx("h4", {
@@ -13673,32 +13593,41 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
                         }) ]
                     })
                 }) ]
-            }) ]
-        }), (copyright || showBackToTop) && jsxRuntime.jsxs("div", {
-            className: bottomClass,
-            children: [ copyright && jsxRuntime.jsx("div", {
-                className: "c-footer__copyright",
-                children: copyright
-            }), showBackToTop && jsxRuntime.jsxs(Button, {
-                variant: "ghost",
-                className: "c-footer__back-to-top",
-                onClick: handleBackToTop,
-                disabled: disabled,
-                "aria-label": backToTopText,
-                children: [ jsxRuntime.jsx("span", {
-                    className: "c-footer__back-to-top-icon",
-                    children: "↑"
-                }), jsxRuntime.jsx("span", {
-                    className: "c-footer__back-to-top-text",
-                    children: backToTopText
+            }) : null ]
+        }), copyright || showBackToTop ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ showDivider && jsxRuntime.jsx("hr", {
+                className: "c-footer__divider"
+            }), jsxRuntime.jsxs("div", {
+                className: bottomClass,
+                children: [ copyright && jsxRuntime.jsx("div", {
+                    className: "c-footer__copyright",
+                    children: copyright
+                }), showBackToTop && jsxRuntime.jsxs(Button, {
+                    variant: "ghost",
+                    className: "c-footer__back-to-top",
+                    onClick: handleBackToTop,
+                    disabled: disabled,
+                    "aria-label": backToTopText,
+                    children: [ jsxRuntime.jsx("span", {
+                        className: "c-footer__back-to-top-icon",
+                        children: "↑"
+                    }), jsxRuntime.jsx("span", {
+                        className: "c-footer__back-to-top-text",
+                        children: backToTopText
+                    }) ]
                 }) ]
             }) ]
-        }) ]
+        }) : null ]
     });
-    // Calculate grid column sizes based on layout
-        return jsxRuntime.jsx("footer", {
+    // ──────────────────────────────────────────
+    // Render helpers
+    // ──────────────────────────────────────────
+        // ──────────────────────────────────────────
+    // Root element
+    // ──────────────────────────────────────────
+    return jsxRuntime.jsx("footer", {
         ref: ref,
-        className: footerClass + " c-footer " + (glass ? "c-footer--glass" : ""),
+        className: footerClass,
         ...props,
         children: glass ? jsxRuntime.jsx(AtomixGlass, {
             ...glass,
@@ -13946,7 +13875,7 @@ var layouts =  Object.freeze({
  * </FooterSection>
  * ```
  */ const FooterSection =  React.forwardRef((({title: title, icon: icon, collapsible: collapsible = !1, defaultCollapsed: defaultCollapsed = !1, showNewsletter: showNewsletter = !1, children: children, className: className = "", ...props}, ref) => {
-    const [isCollapsed, setIsCollapsed] = React__default.default.useState(defaultCollapsed), sectionClass = [ "c-footer__section", collapsible && "c-footer__section--collapsible", isCollapsed && "c-footer__section--collapsed", className ].filter(Boolean).join(" ");
+    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed), sectionId = title ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, "-")}` : void 0, sectionClass = [ "c-footer__section", collapsible && "c-footer__section--collapsible", isCollapsed && "c-footer__section--collapsed", className ].filter(Boolean).join(" ");
     return jsxRuntime.jsx(GridCol, {
         xs: 12,
         md: showNewsletter ? 6 : 3,
@@ -13955,16 +13884,16 @@ var layouts =  Object.freeze({
             ref: ref,
             className: sectionClass,
             ...props,
-            children: [ title && jsxRuntime.jsx("div", {
+            children: [ title ? collapsible ? jsxRuntime.jsx("div", {
                 className: "c-footer__section-header",
-                children: collapsible ? jsxRuntime.jsxs("button", {
+                children: jsxRuntime.jsxs("button", {
                     type: "button",
                     className: "c-footer__section-toggle",
                     onClick: () => {
-                        collapsible && setIsCollapsed(!isCollapsed);
+                        collapsible && setIsCollapsed((prev => !prev));
                     },
                     "aria-expanded": !isCollapsed,
-                    "aria-controls": `footer-section-${title.toString().toLowerCase().replace(/\s+/g, "-")}`,
+                    "aria-controls": sectionId,
                     children: [ icon && jsxRuntime.jsx("span", {
                         className: "c-footer__section-icon",
                         children: icon
@@ -13975,7 +13904,10 @@ var layouts =  Object.freeze({
                         className: "c-footer__section-chevron",
                         children: isCollapsed ? "▼" : "▲"
                     }) ]
-                }) : jsxRuntime.jsxs("div", {
+                })
+            }) : jsxRuntime.jsx("div", {
+                className: "c-footer__section-header",
+                children: jsxRuntime.jsxs("div", {
                     className: "c-footer__section-header-content",
                     children: [ icon && jsxRuntime.jsx("span", {
                         className: "c-footer__section-icon",
@@ -13985,12 +13917,9 @@ var layouts =  Object.freeze({
                         children: title
                     }) ]
                 })
-            }), jsxRuntime.jsx("div", {
+            }) : null, jsxRuntime.jsx("div", {
                 className: "c-footer__section-content",
-                id: title ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, "-")}` : void 0,
-                style: {
-                    display: collapsible && isCollapsed ? "none" : "flex"
-                },
+                id: sectionId,
                 children: children
             }) ]
         })
@@ -14009,8 +13938,8 @@ FooterSection.displayName = "FooterSection";
  * </FooterLink>
  * ```
  */
-const FooterLink =  React.forwardRef((({href: href, icon: icon, external: external = !1, active: active = !1, disabled: disabled = !1, onClick: onClick, children: children, className: className = "", LinkComponent: LinkComponent, ...props}, ref) => {
-    const linkProps = {
+const FooterLink =  React.forwardRef((({href: href, icon: icon, external: external = !1, active: active = !1, disabled: disabled = !1, onClick: onClick, children: children, className: className = "", linkComponent: linkComponent, ...props}, ref) => {
+    const sharedProps = {
         className: [ "c-footer__link", active && "c-footer__link--active", disabled && "c-footer__link--disabled", className ].filter(Boolean).join(" "),
         onClick: disabled ? void 0 : onClick,
         "aria-disabled": disabled,
@@ -14019,35 +13948,7 @@ const FooterLink =  React.forwardRef((({href: href, icon: icon, external: extern
             rel: "noopener noreferrer"
         },
         ...props
-    };
-    if (LinkComponent) {
-        const Component = LinkComponent, componentProps = {
-            ref: ref,
-            ...href && !disabled ? {
-                href: href,
-                to: href
-            } : {},
-            ...linkProps
-        };
-        // Only pass href/to if the link is not disabled and href exists
-                return jsxRuntime.jsxs(Component, {
-            ...componentProps,
-            children: [ icon && jsxRuntime.jsx("span", {
-                className: "c-footer__link-icon",
-                children: icon
-            }), jsxRuntime.jsx("span", {
-                className: "c-footer__link-text",
-                children: children
-            }), external && jsxRuntime.jsx("span", {
-                className: "c-footer__link-external",
-                children: "↗"
-            }) ]
-        });
-    }
-    return jsxRuntime.jsxs("a", {
-        ref: ref,
-        href: disabled ? void 0 : href,
-        ...linkProps,
+    }, linkContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ icon && jsxRuntime.jsx("span", {
             className: "c-footer__link-icon",
             children: icon
@@ -14059,11 +13960,37 @@ const FooterLink =  React.forwardRef((({href: href, icon: icon, external: extern
             children: "↗"
         }) ]
     });
+    if (linkComponent) {
+        const Component = linkComponent;
+        return jsxRuntime.jsx(Component, {
+            ref: ref,
+            ...href && !disabled ? {
+                href: href,
+                to: href
+            } : {},
+            ...sharedProps,
+            children: linkContent
+        });
+    }
+    return jsxRuntime.jsx("a", {
+        ref: ref,
+        href: disabled ? void 0 : href,
+        ...sharedProps,
+        children: linkContent
+    });
 }));
 
 FooterLink.displayName = "FooterLink";
 
-const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, imageColClassName: imageColClassName, imageColStyle: imageColStyle, contentColSize: contentColSize = 5, contentColClassName: contentColClassName, contentColStyle: contentColStyle, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
+const HERO_DEFAULT_GLASS_PROPS = {
+    displacementScale: 60,
+    blurAmount: 3,
+    saturation: 180,
+    aberrationIntensity: 0,
+    borderRadius: 8,
+    overLight: !1,
+    mode: "standard"
+}, Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, imageColClassName: imageColClassName, imageColStyle: imageColStyle, contentColSize: contentColSize = 5, contentColClassName: contentColClassName, contentColStyle: contentColStyle, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
     autoplay: !0,
     loop: !0,
     muted: !0
@@ -14106,9 +14033,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
             }), "Your browser does not support the video tag." ]
         });
     }, renderContent = () => {
-        const content = jsxRuntime.jsxs("div", {
-            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
-            style: parts?.content?.style,
+        // Build inner content elements ONCE — no duplication
+        const innerElements = jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ subtitle && jsxRuntime.jsx("p", {
                 className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
                 style: parts?.subtitle?.style,
@@ -14126,71 +14052,25 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 style: parts?.actions?.style,
                 children: actions
             }) ]
-        });
-        // If glass is explicitly set to false, don't apply glass effect
-                return !1 === glass ? content : 
-        // If glass is true or an object, apply glass effect
-        glass ? 
-        // If glass is true, use default glass props
-        !0 === glass ? jsxRuntime.jsx("div", {
-            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
-            style: parts?.content?.style,
-            children: jsxRuntime.jsx(AtomixGlass, {
-                displacementScale: 60,
-                blurAmount: 3,
-                saturation: 180,
-                aberrationIntensity: 0,
-                borderRadius: 8,
-                overLight: !1,
-                mode: "standard",
-                children: jsxRuntime.jsxs("div", {
+        }), contentBody = glass ? (() => {
+            const glassProps = !0 === glass ? HERO_DEFAULT_GLASS_PROPS : {
+                ...HERO_DEFAULT_GLASS_PROPS,
+                ...glass
+            };
+            return jsxRuntime.jsx(AtomixGlass, {
+                ...glassProps,
+                children: jsxRuntime.jsx("div", {
                     className: "u-p-4",
-                    children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
-                        style: parts?.subtitle?.style,
-                        children: subtitle
-                    }), jsxRuntime.jsx(HeadingTag, {
-                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
-                        style: parts?.title?.style,
-                        children: title
-                    }), text && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
-                        style: parts?.text?.style,
-                        children: text
-                    }), actions && jsxRuntime.jsx("div", {
-                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
-                        style: parts?.actions?.style,
-                        children: actions
-                    }) ]
+                    children: innerElements
                 })
-            })
-        }) : jsxRuntime.jsx("div", {
+            });
+        })() : innerElements;
+        // Conditionally wrap with AtomixGlass using the standard glass prop pattern
+                return jsxRuntime.jsx("div", {
             className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
             style: parts?.content?.style,
-            children: jsxRuntime.jsx(AtomixGlass, {
-                ...glass,
-                children: jsxRuntime.jsxs("div", {
-                    className: "u-p-4",
-                    children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
-                        style: parts?.subtitle?.style,
-                        children: subtitle
-                    }), jsxRuntime.jsx(HeadingTag, {
-                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
-                        style: parts?.title?.style,
-                        children: title
-                    }), text && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
-                        style: parts?.text?.style,
-                        children: text
-                    }), actions && jsxRuntime.jsx("div", {
-                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
-                        style: parts?.actions?.style,
-                        children: actions
-                    }) ]
-                })
-            })
-        }) : content;
+            children: contentBody
+        });
     }, renderForegroundImage = () => hasForegroundImage ? "center" === alignment ? jsxRuntime.jsx("div", {
         className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${imageColClassName || ""} ${parts?.imageWrapper?.className || ""}`.trim(),
         style: {
@@ -14341,35 +14221,24 @@ Hero.Title = ({children: children, className: className, level: level = "h1", ..
     ...props,
     children: children
 }), Hero.Content = ({children: children, className: className, style: style, glass: glass, ...props}) => {
-    const contentClass = `${HERO.SELECTORS.CONTENT.replace(".", "")} ${className || ""}`.trim();
-    if (glass) {
-        const glassProps = "boolean" == typeof glass ? {
-            displacementScale: 60,
-            blurAmount: 3,
-            saturation: 180,
-            aberrationIntensity: 0,
-            borderRadius: 8,
-            overLight: !1,
-            mode: "standard"
-        } : glass;
-        return jsxRuntime.jsx("div", {
-            className: contentClass,
-            style: style,
-            ...props,
-            children: jsxRuntime.jsx(AtomixGlass, {
-                ...glassProps,
-                children: jsxRuntime.jsx("div", {
-                    className: "u-p-4",
-                    children: children
-                })
-            })
+    const contentClass = `${HERO.SELECTORS.CONTENT.replace(".", "")} ${className || ""}`.trim(), innerContent = glass ? jsxRuntime.jsx("div", {
+        className: "u-p-4",
+        children: children
+    }) : children, wrappedContent = glass ? (() => {
+        const glassProps = !0 === glass ? HERO_DEFAULT_GLASS_PROPS : {
+            ...HERO_DEFAULT_GLASS_PROPS,
+            ...glass
+        };
+        return jsxRuntime.jsx(AtomixGlass, {
+            ...glassProps,
+            children: innerContent
         });
-    }
+    })() : innerContent;
     return jsxRuntime.jsx("div", {
         className: contentClass,
         style: style,
         ...props,
-        children: children
+        children: wrappedContent
     });
 }, Hero.Image = ({src: src, alt: alt = "", className: className, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, ...props}) => jsxRuntime.jsx("div", {
     className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${wrapperClassName || ""}`.trim(),
@@ -14912,7 +14781,7 @@ function setRef(ref, value) {
  * ```
  */ Nav.displayName = "Nav";
 
-const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, LinkComponent: LinkComponent}, ref) => {
+const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, target: target, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, linkComponent: linkComponent}, ref) => {
     const {generateNavItemClass: generateNavItemClass, generateNavLinkClass: generateNavLinkClass, handleClick: handleClick} = useNavItem({
         dropdown: dropdown,
         megaMenu: megaMenu,
@@ -14952,6 +14821,7 @@ const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1
         ref: combinedRef,
         href: href || "#",
         to: href || "#",
+        target: target,
         className: navLinkClass,
         onClick: dropdown || megaMenu ? e => {
             (dropdown || megaMenu) && (e.preventDefault(), setIsActive(!isActive));
@@ -14964,8 +14834,8 @@ const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1
         className: navItemClass,
         role: "menuitem",
         "aria-haspopup": dropdown || megaMenu,
-        children: [ LinkComponent ? (() => {
-            const Component = LinkComponent;
+        children: [ linkComponent ? (() => {
+            const Component = linkComponent;
             return jsxRuntime.jsx(Component, {
                 ...linkProps,
                 children: dropdown || megaMenu ? childContent[0] : children
@@ -15073,17 +14943,18 @@ const Navbar =  React.forwardRef((({brand: brand, children: children, variant: v
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
-        };
+        }, isFixed = "fixed" === position || "fixed-bottom" === position;
         return jsxRuntime.jsx(AtomixGlass, {
             ...glassProps,
             style: {
-                ..."fixed" === position && {
-                    position: "fixed"
-                },
-                left: 0,
-                right: 0,
-                top: 0,
-                zIndex: 1e3
+                ...isFixed && {
+                    position: "fixed",
+                    top: "fixed" === position ? 0 : void 0,
+                    bottom: "fixed-bottom" === position ? 0 : void 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: 1030
+                }
             },
             children: jsxRuntime.jsx("nav", {
                 ref: ref,
@@ -15151,7 +15022,7 @@ SideMenuList.displayName = "SideMenuList";
  *
  * // With icon and custom link component
  * import Link from 'next/link';
- * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} LinkComponent={Link}>
+ * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} linkComponent={Link}>
  *   Settings
  * </SideMenuItem>
  *
@@ -15166,7 +15037,7 @@ SideMenuList.displayName = "SideMenuList";
  * </SideMenuItem>
  * ```
  */
-const SideMenuItem =  React.forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, LinkComponent: LinkComponentProp}, ref) => {
+const SideMenuItem =  React.forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, linkComponent: linkComponentProp}, ref) => {
     const {generateSideMenuItemClass: generateSideMenuItemClass, handleClick: handleClick} = useSideMenuItem({
         active: active,
         disabled: disabled,
@@ -15174,8 +15045,8 @@ const SideMenuItem =  React.forwardRef((({children: children, href: href, onClic
     }), itemClass = generateSideMenuItemClass();
     // Render as link if href is provided
     if (href) {
-        if (LinkComponentProp) {
-            const LinkComp = LinkComponentProp, linkProps = {
+        if (linkComponentProp) {
+            const LinkComp = linkComponentProp, linkProps = {
                 ref: ref,
                 className: itemClass,
                 onClick: disabled ? e => {
@@ -15261,7 +15132,7 @@ SideMenuItem.displayName = "SideMenuItem";
  * </SideMenu>
  * ```
  */
-const SideMenu =  React.forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, LinkComponent: LinkComponent}, ref) => {
+const SideMenu =  React.forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, linkComponent: linkComponent}, ref) => {
     const {isOpenState: isOpenState, wrapperRef: wrapperRef, innerRef: innerRef, sideMenuRef: sideMenuRef, generateSideMenuClass: generateSideMenuClass, generateWrapperClass: generateWrapperClass, handleToggle: handleToggle} = useSideMenu({
         isOpen: isOpen,
         onToggle: onToggle,
@@ -15415,7 +15286,7 @@ const SideMenu =  React.forwardRef((({title: title, children: children, menuItem
                                         active: subItem.active,
                                         disabled: subItem.disabled,
                                         icon: subItem.icon,
-                                        LinkComponent: LinkComponent,
+                                        linkComponent: linkComponent,
                                         children: subItem.title
                                     }, subIndex)))
                                 })
@@ -15482,31 +15353,43 @@ const Menu =  React.forwardRef((({children: children, className: className = "",
 
 Menu.displayName = "Menu";
 
-const MenuItem =  React.forwardRef((({children: children, href: href = "#", icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => {
-    const itemClass = `c-menu__item ${active ? "is-active" : ""} ${disabled ? "is-disabled" : ""} ${className}`;
+const MenuItem =  React.forwardRef((({children: children, href: href = "#", target: target, linkComponent: linkComponent, icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => {
+    const itemClass = `c-menu__item ${active ? "is-active" : ""} ${disabled ? "is-disabled" : ""} ${className}`, linkProps = {
+        href: href,
+        to: href,
+        target: target,
+        className: "c-menu__link",
+        onClick: e => {
+            disabled ? e.preventDefault() : onClick && onClick();
+        },
+        "aria-disabled": disabled,
+        "aria-current": active ? "page" : void 0
+    }, content = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ icon && ("string" == typeof icon ? icon.startsWith("c-icon-") ? jsxRuntime.jsx(Icon, {
+            name: mapIconName(icon.replace("c-icon-", "")),
+            size: "sm",
+            className: "c-menu__icon"
+        }) : jsxRuntime.jsx("i", {
+            className: `c-menu__icon ${icon}`,
+            children: "string" != typeof icon && icon
+        }) : jsxRuntime.jsx("span", {
+            className: "c-menu__icon",
+            children: icon
+        })), children ]
+    });
     return jsxRuntime.jsx("li", {
         ref: ref,
         className: itemClass,
         role: "menuitem",
-        children: jsxRuntime.jsxs("a", {
-            href: href,
-            className: "c-menu__link",
-            onClick: e => {
-                disabled ? e.preventDefault() : onClick && onClick();
-            },
-            "aria-disabled": disabled,
-            "aria-current": active ? "page" : void 0,
-            children: [ icon && ("string" == typeof icon ? icon.startsWith("c-icon-") ? jsxRuntime.jsx(Icon, {
-                name: mapIconName(icon.replace("c-icon-", "")),
-                size: "sm",
-                className: "c-menu__icon"
-            }) : jsxRuntime.jsx("i", {
-                className: `c-menu__icon ${icon}`,
-                children: "string" != typeof icon && icon
-            }) : jsxRuntime.jsx("span", {
-                className: "c-menu__icon",
-                children: icon
-            })), children ]
+        children: linkComponent ? (() => {
+            const Component = linkComponent;
+            return jsxRuntime.jsx(Component, {
+                ...linkProps,
+                children: content
+            });
+        })() : jsxRuntime.jsx("a", {
+            ...linkProps,
+            children: content
         })
     });
 }));
@@ -15607,16 +15490,30 @@ const MegaMenuColumn =  React.forwardRef((({title: title, icon: icon, children:
 
 MegaMenuColumn.displayName = "MegaMenuColumn";
 
-const MegaMenuLink =  React.forwardRef((({href: href, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => jsxRuntime.jsx("a", {
-    ref: ref,
-    href: href,
-    className: `c-menu__subitem-link ${disabled ? "is-disabled" : ""} ${className}`,
-    onClick: e => {
-        disabled ? e.preventDefault() : onClick && onClick();
-    },
-    "aria-disabled": disabled,
-    children: children
-})));
+const MegaMenuLink =  React.forwardRef((({href: href, target: target, linkComponent: linkComponent, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => {
+    const linkProps = {
+        ref: ref,
+        href: href,
+        to: href,
+        target: target,
+        className: `c-menu__subitem-link ${disabled ? "is-disabled" : ""} ${className}`,
+        onClick: e => {
+            disabled ? e.preventDefault() : onClick && onClick();
+        },
+        "aria-disabled": disabled
+    };
+    if (linkComponent) {
+        const Component = linkComponent;
+        return jsxRuntime.jsx(Component, {
+            ...linkProps,
+            children: children
+        });
+    }
+    return jsxRuntime.jsx("a", {
+        ...linkProps,
+        children: children
+    });
+}));
 
 MegaMenuLink.displayName = "MegaMenuLink";
 
@@ -17599,8 +17496,8 @@ const SectionIntro = ({title: title, label: label, text: text, actions: actions,
 SectionIntro.displayName = "SectionIntro";
 
 const Slider =  React.forwardRef(((props, ref) => {
-    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, slider = useSlider({
-        slides: slides || [],
+    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, validSlides = Array.isArray(slides) ? slides : [], slider = useSlider({
+        slides: validSlides,
         slidesToShow: slidesToShow,
         spaceBetween: spaceBetween,
         loop: loop,
@@ -17612,8 +17509,8 @@ const Slider =  React.forwardRef(((props, ref) => {
         autoplay: autoplay,
         onSlideChange: onSlideChange
     }), {containerRef: containerRef, wrapperRef: wrapperRef, allSlides: allSlides, realIndex: realIndex, translateValue: translateValue, slideWidth: slideWidth, transitioning: transitioning, touching: touching, slideNext: slideNext, slidePrev: slidePrev, goToSlide: goToSlide, canSlideNext: canSlideNext, canSlidePrev: canSlidePrev, handleTouchStart: handleTouchStart, handleTouchMove: handleTouchMove, handleTouchEnd: handleTouchEnd, loopedSlides: loopedSlides} = slider, totalWrapperWidth = React.useMemo((() => 0 === slideWidth ? 0 : allSlides.length * (slideWidth + spaceBetween) - spaceBetween), [ allSlides.length, slideWidth, spaceBetween ]);
-    // Hooks must be called unconditionally - before early return
-        if (!slides || 0 === slides.length) return jsxRuntime.jsx("div", {
+    // Ensure slides is an array to prevent .map errors
+        if (0 === validSlides.length) return jsxRuntime.jsx("div", {
         className: "c-slider c-slider--empty",
         style: {
             height: height,
@@ -17657,7 +17554,7 @@ const Slider =  React.forwardRef(((props, ref) => {
                 willChange: "transform"
             },
             children: allSlides.map(((slide, index) => jsxRuntime.jsxs("div", {
-                className: [ "c-slider__slide", (loop ? index % slides.length === realIndex : index === realIndex) && "c-slider__slide--active", slide.isClone && "c-slider__slide--duplicate" ].filter(Boolean).join(" "),
+                className: [ "c-slider__slide", (loop ? index % validSlides.length === realIndex : index === realIndex) && "c-slider__slide--active", slide.isClone && "c-slider__slide--duplicate" ].filter(Boolean).join(" "),
                 style: {
                     width: "vertical" === direction ? "100%" : `${slideWidth}px`,
                     height: "vertical" === direction ? `${slideWidth}px` : "100%",
@@ -17719,7 +17616,7 @@ const Slider =  React.forwardRef(((props, ref) => {
             }) ]
         }), pagination && jsxRuntime.jsx("div", {
             className: "c-slider__pagination",
-            children: slides.map(((_, index) => jsxRuntime.jsx("button", {
+            children: validSlides.map(((_, index) => jsxRuntime.jsx("button", {
                 type: "button",
                 className: "c-slider__pagination-bullet " + (index === realIndex ? "c-slider__pagination-bullet--active" : ""),
                 onClick: () => goToSlide(index),
@@ -25607,8 +25504,8 @@ function(component, props) {
  * Hook to merge default props with provided props
  */ , exports.useComponentTheme = useComponentTheme, exports.useDataTable = useDataTable, 
 exports.useEdgePanel = useEdgePanel, exports.useForm = useForm, exports.useFormGroup = useFormGroup, 
-exports.useGlassContainer = useGlassContainer, exports.useHero = useHero, exports.useHistory = useHistory, 
-exports.useInput = useInput, exports.useLineChart = useLineChart, exports.useMergedProps = function(defaultProps, props) {
+exports.useHero = useHero, exports.useHistory = useHistory, exports.useInput = useInput, 
+exports.useLineChart = useLineChart, exports.useMergedProps = function(defaultProps, props) {
     return React.useMemo((() => ({
         ...defaultProps,
         ...props