@shohojdhara/atomix 0.4.4 → 0.4.6

package/dist/forms.js

@@ -58,7 +58,9 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
         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,
@@ -294,7 +296,7 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
         // 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;
@@ -467,7 +469,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, 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 = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
@@ -652,21 +654,12 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
         onClick: onClick,
         children: 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: [ jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
-                style: {
-                    zIndex: 1,
-                    position: "absolute",
-                    inset: 0
-                },
                 children: [ jsx(GlassFilter, {
                     blurAmount: blurAmount,
                     mode: mode,
@@ -681,28 +674,14 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     },
                     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})`
                     }
                 }), 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
                 }) ]
             }), 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
             }) ]
         })
@@ -806,31 +785,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 = {
@@ -937,7 +924,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), internalMouseOffsetRef = useRef({
         x: 0,
         y: 0
-    }), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), targetMouseOffsetRef = useRef({
+        x: 0,
+        y: 0
+    }), targetGlobalMousePositionRef = useRef({
+        x: 0,
+        y: 0
+    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = useState({
             width: 270,
             height: 69
@@ -1034,7 +1027,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
+    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
     useEffect((() => {
         if (("auto" === overLight || "object" == typeof overLight && null !== overLight) && glassRef.current) {
             const element = glassRef.current, cachedResult = ((parentElement, overLightConfig) => {
@@ -1134,102 +1143,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 = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), baseOverLightConfig = useMemo((() => {
-        const isOverLight = getEffectiveOverLight(), baseConfig = {
+    const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = 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 = 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 = useRef(null), calculateDirectionalScale = 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 = 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 = 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 = useMemo((() => effectiveWithoutEffects ? {
-        x: 0,
-        y: 0
-    } : calculateElasticTranslation()), [ calculateElasticTranslation, effectiveWithoutEffects ]), directionalScale = useMemo((() => effectiveWithoutEffects ? "scale(1)" : calculateDirectionalScale()), [ calculateDirectionalScale, effectiveWithoutEffects ]), transformStyle = 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 = useCallback((globalPos => {
+        return "undefined" == typeof process || process.env, baseConfig;
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), handleGlobalMousePosition = useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const container = mouseContainer?.current || glassRef.current;
@@ -1238,35 +1181,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 = 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 = useCallback((() => {
+        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
+        lerpRafRef.current = null);
+    }), []);
     /**
    * Validate and clamp a numeric config value
    */    
@@ -1274,7 +1243,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     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((() => {
@@ -1282,10 +1254,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)
     useEffect((() => {
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
@@ -1294,22 +1266,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 = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleMouseMove = useCallback((_e => {}), []), handleKeyDown = useCallback((e => {
+    const handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
     }), [ onClick ]);
     return {
@@ -1327,14 +1299,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
     };
 }
@@ -1432,25 +1401,56 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         withLiquidBlur: withLiquidBlur,
         padding: padding,
         style: style
-    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, baseStyle = {
-        ...style,
-        ...!effectiveWithoutEffects && {
-            transform: transformStyle
+    }), isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, rootLayoutStyle = useMemo((() => {
+        if (!isFixedOrSticky) return {};
+        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
+        return {
+            ...p && {
+                position: p
+            },
+            ...void 0 !== t && {
+                top: t
+            },
+            ...void 0 !== l && {
+                left: l
+            },
+            ...void 0 !== r && {
+                right: r
+            },
+            ...void 0 !== b && {
+                bottom: b
+            }
+        };
+    }), [ isFixedOrSticky, restStyle ]), baseStyle = 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 = useMemo((() => ({
-        position: style.position || "absolute",
-        top: style.top || 0,
-        left: style.left || 0
-    })), [ style.position, style.top, style.left ]), adjustedSize = 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 = useMemo((() => ({
+        position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
+        top: isFixedOrSticky ? 0 : restStyle.top || 0,
+        left: isFixedOrSticky ? 0 : restStyle.left || 0
+    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = useMemo((() => {
         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 = useMemo((() => {
+    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
         return {
             borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
@@ -1492,6 +1492,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
         const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
         return {
+            ...void 0 !== customZIndex && {
+                "--atomix-glass-base-z-index": customZIndex
+            },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
             "--atomix-glass-position": positionStyles.position,
@@ -1512,22 +1515,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 => 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 => 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 jsxs("div", {
         ...rest,
         className: componentClassName,
-        style: glassVars,
+        style: {
+            ...glassVars
+        },
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
@@ -1539,7 +1539,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,
@@ -1574,7 +1574,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
-            elasticity: elasticity,
             withLiquidBlur: withLiquidBlur,
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
@@ -1591,11 +1590,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), jsx("div", {
                 className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
             }), 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 && jsxs(Fragment, {
             children: [ jsx("span", {