@shohojdhara/atomix 0.4.0 → 0.4.2

package/dist/forms.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
-import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallback, useImperativeHandle } from "react";
+import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallback, useImperativeHandle, useContext, createContext } from "react";
 
 /**
  * Default theme colors for components
@@ -218,7 +218,7 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
             HIGH_CONTRAST: 200
         }
     }
-}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
+}, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
     if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
     const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
     return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -231,36 +231,36 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
     // Bounded calculation — keeps the glass effect subtle and stable
-        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$1.MOUSE_INFLUENCE_DIVISOR;
+        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$2.MOUSE_INFLUENCE_DIVISOR;
     return Math.min(.8, influence);
  // Tighter cap to prevent blur/filter blow-out
-}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$1.MIN_BLUR : Math.max(CONSTANTS$1.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE, parseBorderRadiusValue = value => {
+}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$2.MIN_BLUR : Math.max(CONSTANTS$2.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$2.MAX_SIZE && size.height <= CONSTANTS$2.MAX_SIZE, parseBorderRadiusValue = value => {
     if ("number" == typeof value) return Math.max(0, value);
-    if ("string" != typeof value || !value.trim()) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    if ("string" != typeof value || !value.trim()) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
     const trimmedValue = value.trim();
     // Handle px values
         if (trimmedValue.endsWith("px")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
     }
     // Handle rem values (assume 16px = 1rem)
         if (trimmedValue.endsWith("rem")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle em values (assume 16px = 1em for simplicity)
         if (trimmedValue.endsWith("em")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle percentage (convert to approximate px value, assuming 200px container)
         if (trimmedValue.endsWith("%")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
     }
     // Handle unitless numbers
         const numValue = parseFloat(trimmedValue);
-    return isNaN(numValue) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
+    return isNaN(numValue) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
 }, extractBorderRadiusFromElement = element => {
     if (!element || !element.props) return null;
     // Check inline styles first (highest priority)
@@ -276,11 +276,11 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
     // If element has children, recursively check them
         if (element.props.children) {
         const childRadius = extractBorderRadiusFromChildren(element.props.children);
-        if (childRadius > 0 && childRadius !== CONSTANTS$1.DEFAULT_CORNER_RADIUS) return childRadius;
+        if (childRadius > 0 && childRadius !== CONSTANTS$2.DEFAULT_CORNER_RADIUS) return childRadius;
     }
     return null;
 }, extractBorderRadiusFromChildren = children => {
-    if (!children) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    if (!children) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
     try {
         const childArray = React.Children.toArray(children);
         for (let i = 0; i < childArray.length; i++) {
@@ -293,7 +293,7 @@ import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallb
     } catch (error) {
         // Silently handle errors
     }
-    return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
 }, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
@@ -464,10 +464,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, globalMousePosition: globalMousePosition = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, cornerRadius: cornerRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, 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", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, elasticity: elasticity = 0, 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);
@@ -577,7 +577,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             flowBlur: 1.2 * blurAmount
         };
         // Enhanced validation for liquid blur
-                if (!enableLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
+                if (!withLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
         try {
             const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = 2 * blurAmount, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * .15), edgeIntensity = .15 * mouseInfluence, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = .1 * mouseInfluence, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, 1.2 * baseBlur);
             // NOTE: hover/active multipliers intentionally omitted here —
@@ -592,14 +592,14 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
             defaultBlur;
         }
-    }), [ enableLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
+    }), [ withLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
         try {
             const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), validatedBaseBlur = "number" != typeof liquidBlur.baseBlur || isNaN(liquidBlur.baseBlur) ? 0 : liquidBlur.baseBlur, validatedEdgeBlur = "number" != typeof liquidBlur.edgeBlur || isNaN(liquidBlur.edgeBlur) ? 0 : liquidBlur.edgeBlur, validatedCenterBlur = "number" != typeof liquidBlur.centerBlur || isNaN(liquidBlur.centerBlur) ? 0 : liquidBlur.centerBlur, validatedFlowBlur = "number" != typeof liquidBlur.flowBlur || isNaN(liquidBlur.flowBlur) ? 0 : liquidBlur.flowBlur, area = rectCache ? rectCache.width * rectCache.height : 0;
             // Validate blur values before using them
-                        return !enableLiquidBlur || effectiveReducedMotion || effectiveDisableEffects || area > 18e4 ? {
+                        return !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? {
                 backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
             } : {
-                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
+                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1}) brightness(${overLightConfig?.brightness || 1})`
             };
             // Single-pass fallback: stronger radius to match perceived blur of multi-pass
                 } catch (error) {
@@ -608,7 +608,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur ]), containerVars = useMemo((() => {
         try {
             // Safe extraction of mouse offset values
             const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
@@ -616,10 +616,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-width": `${glassSize?.width}`,
                 "--atomix-glass-container-height": `${glassSize?.height}`,
                 "--atomix-glass-container-padding": padding || "0 0",
-                "--atomix-glass-container-radius": `${"number" != typeof cornerRadius || isNaN(cornerRadius) ? 0 : cornerRadius}px`,
+                "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
                 "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
-                "--atomix-glass-container-shadow-opacity": effectiveDisableEffects ? 0 : 1,
+                "--atomix-glass-container-shadow-opacity": effectiveWithoutEffects ? 0 : 1,
                 // Background and shadow values use design token-aligned RGB values
                 "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
                 "--atomix-glass-container-text-shadow": overLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
@@ -637,14 +637,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]), setForceNoTransition = el => {
-        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
-        el.style.setProperty("transition-delay", "0s", "important"));
-    };
+    }), [ glassSize, padding, borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects ]);
     return jsx("div", {
         ref: el => {
             // Apply force no-transition
-            setForceNoTransition(el), 
             // Handle forwarded ref
             "function" == typeof ref ? ref(el) : ref && (ref.current = el);
         },
@@ -679,7 +675,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
-                    ref: setForceNoTransition,
+                    ref: el => {
+                        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
+                        el.style.setProperty("transition-delay", "0s", "important"));
+                    },
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`,
@@ -796,7 +795,128 @@ class {
    */    getSubscriberCount() {
         return this.listeners.size;
     }
-}, {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
+}, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
+    if (!wrapperElement && !containerElement) return;
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, directionalScale: directionalScale, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+        opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
+        contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
+        brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
+        shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
+        borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence)),
+        saturationBoost: baseOverLightConfig.saturationBoost
+    };
+    // Calculate mouse influence
+        // Calculate elastic translation
+    let elasticTranslation = {
+        x: 0,
+        y: 0
+    };
+    if (!effectiveWithoutEffects && wrapperElement) {
+        const rect = wrapperElement.getBoundingClientRect(), center = calculateElementCenter(rect);
+        // Calculate fade in factor
+        let fadeInFactor = 0;
+        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({
+                x: edgeDistanceX,
+                y: edgeDistanceY
+            }, {
+                x: 0,
+                y: 0
+            });
+            fadeInFactor = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
+        }
+        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}`;
+    // 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 = {
+            hover1: {
+                x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+                y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
+            },
+            hover2: {
+                x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+                y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
+            },
+            hover3: {
+                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+                y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
+            }
+        }, basePosition = {
+            x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+            y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
+        }, opacityValues = {
+            hover1: isHovered || isActive ? .5 : 0,
+            hover2: isActive ? .5 : 0,
+            hover3: isHovered ? .4 : isActive ? .8 : 0,
+            base: isOverLight ? overLightConfig.opacity : 0,
+            over: isOverLight ? 1.1 * overLightConfig.opacity : 0
+        }, style = wrapperElement.style;
+        style.setProperty("--atomix-glass-transform", transformStyle || "none"), 
+        // Gradients
+        style.setProperty("--atomix-glass-border-gradient-1", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        style.setProperty("--atomix-glass-border-gradient-2", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        // Hover gradients
+        style.setProperty("--atomix-glass-hover-1-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-hover-3-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`), 
+        style.setProperty("--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})`), 
+        style.setProperty("--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})`), 
+        // Opacities
+        style.setProperty("--atomix-glass-hover-1-opacity", opacityValues.hover1.toString()), 
+        style.setProperty("--atomix-glass-hover-2-opacity", opacityValues.hover2.toString()), 
+        style.setProperty("--atomix-glass-hover-3-opacity", opacityValues.hover3.toString()), 
+        style.setProperty("--atomix-glass-base-opacity", opacityValues.base.toString()), 
+        style.setProperty("--atomix-glass-overlay-opacity", opacityValues.over.toString()), 
+        style.setProperty("--atomix-glass-overlay-highlight-opacity", (opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER).toString()), 
+        // Other
+        style.setProperty("--atomix-glass-blend-mode", isOverLight ? "multiply" : "overlay"), 
+        style.setProperty("--atomix-glass-radius", `${effectiveBorderRadius}px`);
+    }
+    // Update Container Styles (containerVars)
+        if (containerElement) {
+        const mx = mouseOffset.x, my = mouseOffset.y, EDGE_BLUR_MULTIPLIER = 1.25, CENTER_BLUR_MULTIPLIER = 1.1, FLOW_BLUR_MULTIPLIER = 1.2, MOUSE_INFLUENCE_BLUR_FACTOR = .15, EDGE_INTENSITY_MOUSE_FACTOR = .15, CENTER_INTENSITY_MOUSE_FACTOR = .1, MAX_BLUR_RELATIVE = 2, rect = containerElement.getBoundingClientRect();
+        let liquidBlur = {
+            baseBlur: blurAmount,
+            edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
+            centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
+            flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER
+        };
+        if (withLiquidBlur && rect) {
+            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = blurAmount * MAX_BLUR_RELATIVE, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR), edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+            liquidBlur = {
+                baseBlur: clampBlur(baseBlur),
+                edgeBlur: clampBlur(edgeBlur),
+                centerBlur: clampBlur(centerBlur),
+                flowBlur: clampBlur(flowBlur)
+            };
+        }
+        // Backdrop filter
+                let backdropFilterString = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
+        const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), area = rect ? rect.width * rect.height : 0;
+        backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+        // Container variables
+                const style = containerElement.style;
+        style.setProperty("--atomix-glass-container-width", `${glassSize.width}`), style.setProperty("--atomix-glass-container-height", `${glassSize.height}`), 
+        style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
+        style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
+        // Shadows
+        style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset"), 
+        style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"), 
+        style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"), 
+        style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
+        style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)");
+    }
+}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+
+/**
+ * Updates the styles of the AtomixGlass wrapper and container elements imperatively
+ * to avoid React re-renders on mouse movement.
+ */ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
         result: result,
         timestamp: Date.now(),
@@ -809,18 +929,74 @@ class {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1, enablePerformanceMonitoring: enablePerformanceMonitoring = !1, children: children}) {
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, debugPerformance: debugPerformance = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur}) {
     // State
-    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), [glassSize, setGlassSize] = useState({
-        width: 270,
-        height: 69
-    }), [internalGlobalMousePosition, setInternalGlobalMousePosition] = useState({
+    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
-    }), [internalMouseOffset, setInternalMouseOffset] = useState({
+    }), internalMouseOffsetRef = useRef({
         x: 0,
         y: 0
-    }), [dynamicCornerRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveCornerRadius = useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
+    }), [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
+        });
+        return useEffect((() => {
+            const isValidElement = element => null !== element && element instanceof HTMLElement && element.isConnected;
+            let rafId = null, lastSize = {
+                width: 0,
+                height: 0
+            }, lastCornerRadius = effectiveBorderRadius;
+            const updateGlassSize = (forceUpdate = !1) => {
+                null !== rafId && cancelAnimationFrame(rafId), rafId = requestAnimationFrame((() => {
+                    if (!isValidElement(glassRef.current)) return void (rafId = null);
+                    const rect = glassRef.current.getBoundingClientRect();
+                    if (rect.width <= 0 || rect.height <= 0) return void (rafId = null);
+                    // Measure actual rendered size without artificial offsets to avoid feedback loops
+                                        const newSize = {
+                        width: Math.round(rect.width),
+                        height: Math.round(rect.height)
+                    }, cornerRadiusChanged = lastCornerRadius !== effectiveBorderRadius, dimensionsChanged = Math.abs(newSize.width - lastSize.width) > 1 || Math.abs(newSize.height - lastSize.height) > 1;
+                    var size;
+                    (forceUpdate || cornerRadiusChanged || dimensionsChanged) && validateGlassSize(size = newSize) && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE && (lastSize = newSize, 
+                    lastCornerRadius = effectiveBorderRadius, setGlassSize(newSize)), rafId = null;
+                }));
+            };
+            let resizeTimeoutId = null;
+            const debouncedResizeHandler = () => {
+                resizeTimeoutId && clearTimeout(resizeTimeoutId), resizeTimeoutId = setTimeout((() => updateGlassSize(!1)), 16);
+            }, initialTimeoutId = setTimeout((() => updateGlassSize(!0)), 0);
+            let resizeObserver = null, resizeDebounceTimeout = null;
+            // ResizeObserver has 98%+ browser support, no need for fallback
+            if ("undefined" != typeof ResizeObserver && isValidElement(glassRef.current)) try {
+                resizeObserver = new ResizeObserver((entries => {
+                    for (const entry of entries) if (entry.target === glassRef.current) {
+                        // Update cached rect when size changes
+                        glassRef.current && cachedRectRef && (cachedRectRef.current = glassRef.current.getBoundingClientRect()), 
+                        // Debounce resize updates to match RAF timing (16ms)
+                        resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), resizeDebounceTimeout = setTimeout((() => updateGlassSize(!1)), 16);
+                        break;
+                    }
+                })), resizeObserver.observe(glassRef.current);
+            } catch (error) {
+                console.warn("AtomixGlass: ResizeObserver not available, using window resize only", error);
+            }
+            return window.addEventListener("resize", debouncedResizeHandler, {
+                passive: !0
+            }), () => {
+                clearTimeout(initialTimeoutId), null !== rafId && cancelAnimationFrame(rafId), resizeTimeoutId && clearTimeout(resizeTimeoutId), 
+                resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), window.removeEventListener("resize", debouncedResizeHandler), 
+                resizeObserver?.disconnect();
+            };
+        }), [ effectiveBorderRadius, glassRef, cachedRectRef ]), {
+            glassSize: glassSize
+        };
+    }({
+        glassRef: glassRef,
+        effectiveBorderRadius: effectiveBorderRadius,
+        cachedRectRef: cachedRectRef
+    }), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
@@ -851,13 +1027,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                 }
                 null !== extractedRadius && extractedRadius > 0 && setDynamicCornerRadius(extractedRadius);
             } catch (error) {
-                "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugCornerRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
+                "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugBorderRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
             }
         };
         extractRadius();
         const timeoutId = setTimeout(extractRadius, 100);
         return () => clearTimeout(timeoutId);
-    }), [ children, debugCornerRadius, contentRef ]), 
+    }), [ children, debugBorderRadius, contentRef ]), 
     // Media query handlers and background detection
     useEffect((() => {
         if (("auto" === overLight || "object" == typeof overLight && null !== overLight) && glassRef.current) {
@@ -913,72 +1089,52 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                                 const rgb = bgColor.match(/\d+/g);
                                 if (rgb && rgb.length >= 3) {
                                     const r = Number(rgb[0]), g = Number(rgb[1]), b = Number(rgb[2]);
-                                    // Validate RGB values are valid numbers
-                                    if (!isNaN(r) && !isNaN(g) && !isNaN(b) && isFinite(r) && isFinite(g) && isFinite(b) && r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255 && (r > 10 || g > 10 || b > 10)) {
+                                    if (!isNaN(r) && !isNaN(g) && !isNaN(b) && (r > 10 || g > 10 || b > 10)) {
                                         const luminance = (.299 * r + .587 * g + .114 * b) / 255;
                                         !isNaN(luminance) && isFinite(luminance) && (totalLuminance += luminance, validSamples++, 
                                         hasValidBackground = !0);
                                     }
                                 }
                             }
-                            // Check for image backgrounds
-                                                        bgImage && "none" !== bgImage && "initial" !== bgImage && (
-                            // For image backgrounds, assume medium luminance
-                            totalLuminance += .5, validSamples++, hasValidBackground = !0);
+                            bgImage && "none" !== bgImage && "initial" !== bgImage && (totalLuminance += .5, 
+                            validSamples++, hasValidBackground = !0);
                         } catch (styleError) {
-                            "undefined" == typeof process || process.env;
+                            // Silently continue
                         }
-                        // Move to parent element for next iteration
-                                                if (!currentElement) break;
- // Exit loop if currentElement becomes null
-                                                currentElement = currentElement.parentElement, depth++;
+                        if (!currentElement) break;
+                        currentElement = currentElement.parentElement, depth++;
                     }
-                    // More conservative detection with better error handling
-                                        if (hasValidBackground && validSamples > 0) {
+                    if (hasValidBackground && validSamples > 0) {
                         const avgLuminance = totalLuminance / validSamples;
                         if (!isNaN(avgLuminance) && isFinite(avgLuminance)) {
                             let threshold = .7;
- // Conservative threshold for overlight
-                            // If overLight is an object, use its threshold property with validation
-                                                        if ("object" == typeof overLight && null !== overLight) {
+                            if ("object" == typeof overLight && null !== overLight) {
                                 const objConfig = overLight;
                                 if (void 0 !== objConfig.threshold) {
-                                    const configThreshold = "number" == typeof objConfig.threshold && !isNaN(objConfig.threshold) && isFinite(objConfig.threshold) ? objConfig.threshold : .7;
+                                    const configThreshold = "number" != typeof objConfig.threshold || isNaN(objConfig.threshold) ? .7 : objConfig.threshold;
                                     threshold = Math.min(.9, Math.max(.1, configThreshold));
                                 }
                             }
                             const isOverLightDetected = avgLuminance > threshold;
-                            // Cache the result in shared cache
-                                                        setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold), 
+                            setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold), 
                             setDetectedOverLight(isOverLightDetected);
                         } else {
-                            // Invalid luminance calculation, default to false
                             const result = !1, threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
                             setCachedBackgroundDetection(element.parentElement, overLight, result, threshold), 
                             setDetectedOverLight(result);
                         }
                     } else {
-                        // Default to false if no valid background found
                         const result = !1, threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
                         setCachedBackgroundDetection(element.parentElement, overLight, result, threshold), 
                         setDetectedOverLight(result);
                     }
                 } catch (error) {
-                    // Enhanced error logging with context
-                    "undefined" != typeof process && "development" !== process.env?.NODE_ENV || console.warn("AtomixGlass: Error detecting background brightness:", error);
-                    const result = !1;
-                    if (element && element.parentElement) {
-                        const threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
-                        setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
-                    }
-                    setDetectedOverLight(result);
+                    setDetectedOverLight(!1);
                 }
             }), 150);
             return () => clearTimeout(timeoutId);
         }
-        if ("boolean" == typeof overLight && 
-        // For boolean values, disable auto-detection
-        setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
+        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 => {
@@ -989,65 +1145,54 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             return mediaQueryReducedMotion.addEventListener ? (mediaQueryReducedMotion.addEventListener("change", handleReducedMotionChange), 
             mediaQueryHighContrast.addEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.addListener && (mediaQueryReducedMotion.addListener(handleReducedMotionChange), 
             mediaQueryHighContrast.addListener(handleHighContrastChange)), () => {
-                try {
-                    mediaQueryReducedMotion.removeEventListener ? (mediaQueryReducedMotion.removeEventListener("change", handleReducedMotionChange), 
-                    mediaQueryHighContrast.removeEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.removeListener && (mediaQueryReducedMotion.removeListener(handleReducedMotionChange), 
-                    mediaQueryHighContrast.removeListener(handleHighContrastChange));
-                } catch (cleanupError) {
-                    console.error("AtomixGlass: Error cleaning up media query listeners:", cleanupError);
-                }
+                // ignore
             };
         } catch (error) {
-            return void console.error("AtomixGlass: Error setting up media queries:", error);
+            return;
         }
     }), [ overLight, glassRef, debugOverLight ]);
-    // Mouse tracking using shared global tracker
-    // Cache bounding rect to avoid repeated getBoundingClientRect calls
-    const cachedRectRef = useRef(null), updateRectRef = useRef(null), handleGlobalMousePosition = useCallback((globalPos => {
-        if (externalGlobalMousePosition && externalMouseOffset) 
-        // External mouse position provided, skip internal tracking
-        return;
-        if (effectiveDisableEffects) return;
-        const container = mouseContainer?.current || glassRef.current;
-        if (!container) return;
-        enablePerformanceMonitoring && performance.now();
-        // Use cached rect if available, otherwise get new one
-        let rect = cachedRectRef.current;
-        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 = {
-            x: (globalPos.x - center.x) / rect.width * 100,
-            y: (globalPos.y - center.y) / rect.height * 100
+    /**
+   * 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 = {
+            isOverLight: isOverLight,
+            threshold: .7,
+            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5)) : 0,
+            contrast: 1,
+            // Base contrast
+            brightness: 1,
+            // Base brightness
+            saturationBoost: 1.3,
+            shadowIntensity: .9,
+            borderOpacity: .7
         };
-        // Calculate offset relative to this container
-                // React 18 automatically batches these updates
-        setInternalMouseOffset(newOffset), setInternalGlobalMousePosition(globalPos), "undefined" != typeof process && "production" === process.env?.NODE_ENV || !enablePerformanceMonitoring || performance.now();
-    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects, enablePerformanceMonitoring ]);
-    // Subscribe to shared mouse tracker
-    useEffect((() => {
-        if (externalGlobalMousePosition && externalMouseOffset) 
-        // External mouse position provided, don't subscribe
-        return;
-        if (effectiveDisableEffects) 
-        // Effects disabled, don't subscribe
-        return;
-        // Subscribe to shared tracker
-                const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), container = mouseContainer?.current || glassRef.current;
-        // Update cached rect when container size changes
-                let resizeObserver = null;
-        return container && "undefined" != typeof ResizeObserver && (resizeObserver = new ResizeObserver((() => {
-            null !== updateRectRef.current && cancelAnimationFrame(updateRectRef.current), updateRectRef.current = requestAnimationFrame((() => {
-                const container = mouseContainer?.current || glassRef.current;
-                container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
-            }));
-        })), resizeObserver.observe(container)), () => {
-            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
-            updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
+        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 {
+                ...baseConfig,
+                threshold: validatedThreshold,
+                opacity: validatedOpacity,
+                contrast: validatedContrast,
+                brightness: validatedBrightness,
+                saturationBoost: validatedSaturationBoost
+            };
+        }
+        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))
         };
-    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
-    // Transform calculations
-    const calculateDirectionalScale = useCallback((() => {
-        if (!0 === overLight || "auto" === overLight && detectedOverLight || "object" == typeof overLight && null !== overLight && detectedOverLight) return "scale(1)";
+    }), [ 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,
@@ -1061,7 +1206,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         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, overLight, detectedOverLight ]), calculateFadeInFactor = useCallback((() => {
+    }), [ 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,
@@ -1081,122 +1226,110 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
             y: (globalMousePosition.y - center.y) * elasticity * .1 * fadeInFactor
         };
-    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = useMemo((() => effectiveDisableEffects ? {
+    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = useMemo((() => effectiveWithoutEffects ? {
         x: 0,
         y: 0
-    } : calculateElasticTranslation()), [ calculateElasticTranslation, effectiveDisableEffects ]), directionalScale = useMemo((() => effectiveDisableEffects ? "scale(1)" : calculateDirectionalScale()), [ calculateDirectionalScale, effectiveDisableEffects ]), transformStyle = useMemo((() => effectiveDisableEffects ? 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, effectiveDisableEffects ]);
-    // Size management
-    useEffect((() => {
-        const isValidElement = element => null !== element && element instanceof HTMLElement && element.isConnected;
-        let rafId = null, lastSize = {
-            width: 0,
-            height: 0
-        }, lastCornerRadius = effectiveCornerRadius;
-        const updateGlassSize = (forceUpdate = !1) => {
-            null !== rafId && cancelAnimationFrame(rafId), rafId = requestAnimationFrame((() => {
-                if (!isValidElement(glassRef.current)) return void (rafId = null);
-                const rect = glassRef.current.getBoundingClientRect();
-                if (rect.width <= 0 || rect.height <= 0) return void (rafId = null);
-                // Measure actual rendered size without artificial offsets to avoid feedback loops
-                                const newSize = {
-                    width: Math.round(rect.width),
-                    height: Math.round(rect.height)
-                }, cornerRadiusChanged = lastCornerRadius !== effectiveCornerRadius, dimensionsChanged = Math.abs(newSize.width - lastSize.width) > 1 || Math.abs(newSize.height - lastSize.height) > 1;
-                var size;
-                (forceUpdate || cornerRadiusChanged || dimensionsChanged) && validateGlassSize(size = newSize) && size.width <= CONSTANTS.MAX_SIZE && size.height <= CONSTANTS.MAX_SIZE && (lastSize = newSize, 
-                lastCornerRadius = effectiveCornerRadius, setGlassSize(newSize)), rafId = null;
-            }));
-        };
-        let resizeTimeoutId = null;
-        const debouncedResizeHandler = () => {
-            resizeTimeoutId && clearTimeout(resizeTimeoutId), resizeTimeoutId = setTimeout((() => updateGlassSize(!1)), 16);
-        }, initialTimeoutId = setTimeout((() => updateGlassSize(!0)), 0);
-        let resizeObserver = null, resizeDebounceTimeout = null;
-        // ResizeObserver has 98%+ browser support, no need for fallback
-        if ("undefined" != typeof ResizeObserver && isValidElement(glassRef.current)) try {
-            resizeObserver = new ResizeObserver((entries => {
-                for (const entry of entries) if (entry.target === glassRef.current) {
-                    // Update cached rect when size changes
-                    glassRef.current && (cachedRectRef.current = glassRef.current.getBoundingClientRect()), 
-                    // Debounce resize updates to match RAF timing (16ms)
-                    resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), resizeDebounceTimeout = setTimeout((() => updateGlassSize(!1)), 16);
-                    break;
-                }
-            })), resizeObserver.observe(glassRef.current);
-        } catch (error) {
-            console.warn("AtomixGlass: ResizeObserver not available, using window resize only", error);
-        }
-        return window.addEventListener("resize", debouncedResizeHandler, {
-            passive: !0
-        }), () => {
-            clearTimeout(initialTimeoutId), null !== rafId && cancelAnimationFrame(rafId), resizeTimeoutId && clearTimeout(resizeTimeoutId), 
-            resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), window.removeEventListener("resize", debouncedResizeHandler), 
-            resizeObserver?.disconnect();
+    } : 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 => {
+        if (externalGlobalMousePosition && externalMouseOffset) return;
+        if (effectiveWithoutEffects) return;
+        const container = mouseContainer?.current || glassRef.current;
+        if (!container) return;
+        // Use cached rect if available, otherwise get new one
+                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 = {
+            x: (globalPos.x - center.x) / rect.width * 100,
+            y: (globalPos.y - center.y) / rect.height * 100
         };
-    }), [ effectiveCornerRadius, glassRef ]);
-    // OverLight config
+        // 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 ]);
     /**
-   * Get effective overLight value based on configuration
-   * - boolean: returns the boolean value directly
-   * - 'auto': returns detectedOverLight (auto-detected from background)
-   * - object: returns detectedOverLight (auto-detected, but config object provides customization)
-   */
-    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(), mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
-            isOverLight: isOverLight,
-            threshold: .7,
-            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: Math.min(1.6, Math.max(1, 1.4 + .1 * mouseInfluence)),
-            brightness: Math.min(1.1, Math.max(.8, .9 + .05 * mouseInfluence)),
-            saturationBoost: 1.3,
-            // Fixed value — dynamic saturation amplifies perceived displacement
-            shadowIntensity: Math.min(1.2, Math.max(.5, .9 + .2 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, .7 + .1 * mouseInfluence))
+   * Validate and clamp a numeric config value
+   */    
+    // Subscribe to shared mouse tracker
+    useEffect((() => {
+        if (externalGlobalMousePosition && externalMouseOffset) return;
+        if (effectiveWithoutEffects) return;
+        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), 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((() => {
+                const container = mouseContainer?.current || glassRef.current;
+                container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
+            }));
+        })), resizeObserver.observe(container)), () => {
+            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
+            updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
         };
-        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), finalConfig = {
-                ...baseConfig,
-                threshold: validatedThreshold,
-                opacity: validatedOpacity * hoverIntensity * activeIntensity,
-                contrast: Math.min(1.6, validatedContrast + .1 * mouseInfluence),
-                brightness: Math.min(1.1, validatedBrightness + .05 * mouseInfluence),
-                saturationBoost: validatedSaturationBoost
-            };
-            // Validate and apply object config values with proper clamping
-                        return "undefined" == typeof process || process.env, finalConfig;
-        }
-        // Debug logging for non-object configs
-                return "undefined" == typeof process || process.env, baseConfig;
-    }), [ overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive, validateConfigValue, debugOverLight ]), handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
+    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
+    // Also call updateStyles on other state changes (hover, active, etc)
+    useEffect((() => {
+        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+            mouseOffset: externalMouseOffset || internalMouseOffsetRef.current,
+            globalMousePosition: externalGlobalMousePosition || internalGlobalMousePositionRef.current,
+            glassSize: glassSize,
+            isHovered: isHovered,
+            isActive: isActive,
+            isOverLight: baseOverLightConfig.isOverLight,
+            baseOverLightConfig: baseOverLightConfig,
+            effectiveBorderRadius: effectiveBorderRadius,
+            effectiveWithoutEffects: effectiveWithoutEffects,
+            effectiveReducedMotion: effectiveReducedMotion,
+            elasticity: elasticity,
+            directionalScale: directionalScale,
+            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 ]);
+    // 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 => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
-    }), [ onClick ]), handleMouseMove = useCallback((_e => {}), []);
-    /**
-   * Validate and clamp a numeric config value
-   * @param value - The value to validate
-   * @param min - Minimum allowed value
-   * @param max - Maximum allowed value
-   * @param defaultValue - Default value if validation fails
-   * @returns Validated and clamped value
-   */    return {
-        // State
+    }), [ onClick ]);
+    return {
         isHovered: isHovered,
         isActive: isActive,
         glassSize: glassSize,
-        dynamicCornerRadius: dynamicCornerRadius,
-        effectiveCornerRadius: effectiveCornerRadius,
+        dynamicBorderRadius: dynamicBorderRadius,
+        effectiveBorderRadius: effectiveBorderRadius,
         effectiveReducedMotion: effectiveReducedMotion,
         effectiveHighContrast: effectiveHighContrast,
-        effectiveDisableEffects: effectiveDisableEffects,
+        effectiveWithoutEffects: effectiveWithoutEffects,
         detectedOverLight: detectedOverLight,
         globalMousePosition: globalMousePosition,
+        // This is now static (refs or props) unless prop changes
         mouseOffset: mouseOffset,
-        // OverLight config
+        // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
-        // Transform calculations
         elasticTranslation: elasticTranslation,
         directionalScale: directionalScale,
         transformStyle: transformStyle,
-        // Event handlers
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -1235,7 +1368,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  *
  * @example
  * // Manual border-radius override
- * <AtomixGlass cornerRadius={20}>
+ * <AtomixGlass borderRadius={20}>
  *   <div>Content with 20px glass radius</div>
  * </AtomixGlass>
  *
@@ -1276,37 +1409,48 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  * <AtomixGlass overLight="auto" debugOverLight={true}>
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
- */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, enableLiquidBlur: enableLiquidBlur = !1, enableBorderEffect: enableBorderEffect = !0, enableOverLightLayers: enableOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, enablePerformanceMonitoring: enablePerformanceMonitoring = !1, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1}) {
-    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveCornerRadius: effectiveCornerRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveDisableEffects: effectiveDisableEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+ */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, height: height, width: width, ...rest}) {
+    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
-        cornerRadius: cornerRadius,
+        borderRadius: borderRadius,
         globalMousePosition: externalGlobalMousePosition,
         mouseOffset: externalMouseOffset,
         mouseContainer: mouseContainer,
         overLight: overLight,
         reducedMotion: reducedMotion,
         highContrast: highContrast,
-        disableEffects: disableEffects,
+        withoutEffects: withoutEffects,
         elasticity: elasticity,
         onClick: onClick,
-        debugCornerRadius: debugCornerRadius,
+        debugBorderRadius: debugBorderRadius,
         debugOverLight: debugOverLight,
-        enablePerformanceMonitoring: enablePerformanceMonitoring,
-        children: children
-    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
+        debugPerformance: debugPerformance,
+        children: children,
+        blurAmount: blurAmount,
+        saturation: saturation,
+        withLiquidBlur: withLiquidBlur,
+        padding: padding,
+        style: style
+    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, baseStyle = {
         ...style,
-        ...!effectiveDisableEffects && {
+        ...!effectiveWithoutEffects && {
             transform: transformStyle
         }
-    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
+    }, 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((() => ({
-        width: "fixed" !== style.position ? "100%" : style.width ? style.width : Math.max(glassSize.width, 0),
-        height: "fixed" !== style.position ? "100%" : style.height ? style.height : Math.max(glassSize.height, 0)
-    })), [ style.position, style.width, style.height, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
+    })), [ style.position, style.top, style.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, height, style.width, style.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,
@@ -1348,13 +1492,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ 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 {
-            "--atomix-glass-radius": `${effectiveCornerRadius}px`,
+            "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
             "--atomix-glass-position": positionStyles.position,
             "--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
             "--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
-            "--atomix-glass-width": "fixed" !== style.position ? adjustedSize.width : `${adjustedSize.width}px`,
-            "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
+            "--atomix-glass-width": adjustedSize.width,
+            "--atomix-glass-height": adjustedSize.height,
             "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
             "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
             "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
@@ -1370,24 +1514,25 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--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})`
         };
-    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ 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: `${effectiveCornerRadius}px`,
+            borderRadius: `${effectiveBorderRadius}px`,
             transform: baseStyle.transform
         }
     });
     return jsxs("div", {
+        ...rest,
         className: componentClassName,
         style: glassVars,
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
-        "aria-disabled": !(!onClick || !effectiveDisableEffects) || !onClick && void 0,
+        "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
         "aria-pressed": !(!onClick || !isActive) || !onClick && void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
@@ -1395,18 +1540,18 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             contentRef: contentRef,
             className: className,
             style: baseStyle,
-            cornerRadius: effectiveCornerRadius,
-            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
-            blurAmount: effectiveDisableEffects ? 0 : blurAmount,
+            borderRadius: effectiveBorderRadius,
+            displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
+            blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
             saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
-            aberrationIntensity: effectiveDisableEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
+            aberrationIntensity: effectiveWithoutEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
             glassSize: glassSize,
             padding: padding,
-            mouseOffset: effectiveDisableEffects ? {
+            mouseOffset: effectiveWithoutEffects ? {
                 x: 0,
                 y: 0
             } : mouseOffset,
-            globalMousePosition: effectiveDisableEffects ? {
+            globalMousePosition: effectiveWithoutEffects ? {
                 x: 0,
                 y: 0
             } : globalMousePosition,
@@ -1426,11 +1571,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             onClick: onClick,
             mode: mode,
             transform: baseStyle.transform,
-            effectiveDisableEffects: effectiveDisableEffects,
+            effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             elasticity: elasticity,
-            enableLiquidBlur: enableLiquidBlur,
+            withLiquidBlur: withLiquidBlur,
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
             children: [ jsx("div", {
@@ -1452,11 +1597,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                     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}%)`
                 }
             }) ]
-        }), enableBorderEffect && jsxs(Fragment, {
+        }), withBorder && jsxs(Fragment, {
             children: [ jsx("span", {
-                className: ATOMIX_GLASS.BORDER_1_CLASS
+                className: ATOMIX_GLASS.BORDER_1_CLASS,
+                style: {
+                    width: glassSize.width,
+                    height: glassSize.height
+                }
             }), jsx("span", {
-                className: ATOMIX_GLASS.BORDER_2_CLASS
+                className: ATOMIX_GLASS.BORDER_2_CLASS,
+                style: {
+                    width: glassSize.width,
+                    height: glassSize.height
+                }
             }) ]
         }) ]
     });
@@ -1517,7 +1670,7 @@ const Checkbox =  React.memo( forwardRef((({label: label, checked: checked, onCh
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .3,
-            cornerRadius: 6,
+            borderRadius: 6,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -1742,7 +1895,7 @@ const Input =  memo( forwardRef((({type: type = "text", value: value, defaultVal
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: .2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -1827,7 +1980,7 @@ const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange,
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .3,
-            cornerRadius: 6,
+            borderRadius: 6,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -1843,10 +1996,427 @@ const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange,
 
 Radio.displayName = "Radio";
 
+var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+
+var fails$8 = function(exec) {
+    try {
+        return !!exec();
+    } catch (error) {
+        return !0;
+    }
+}, functionBindNative = !fails$8((function() {
+    // eslint-disable-next-line es/no-function-prototype-bind -- safe
+    var test = function() {/* empty */}.bind();
+    // eslint-disable-next-line no-prototype-builtins -- safe
+        return "function" != typeof test || test.hasOwnProperty("prototype");
+})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
+    return function() {
+        return call$5.apply(fn, arguments);
+    };
+}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
+    return it && it.Math === Math && it;
+}, globalThis_1 = 
+// eslint-disable-next-line es/no-global-this -- safe
+check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
+// eslint-disable-next-line no-restricted-globals -- safe
+check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
+// eslint-disable-next-line no-new-func -- fallback
+function() {
+    return this;
+}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
+    return call$4.apply(apply$1, arguments);
+}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
+    return stringSlice(toString$3(it), 8, -1);
+}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
+    // Nashorn bug:
+    //   https://github.com/zloirock/core-js/issues/1128
+    //   https://github.com/zloirock/core-js/issues/1130
+    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
+}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
+    return "function" == typeof argument || argument === documentAll;
+} : function(argument) {
+    return "function" == typeof argument;
+}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty({}, 1, {
+        get: function() {
+            return 7;
+        }
+    })[1];
+})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
+    return call$3.apply(call$3, arguments);
+}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
+    1: 2
+}, 1);
+
+// `Object.prototype.propertyIsEnumerable` method implementation
+// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
+objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
+    var descriptor = getOwnPropertyDescriptor$1(this, V);
+    return !!descriptor && descriptor.enumerable;
+} : $propertyIsEnumerable;
+
+var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
+    return {
+        enumerable: !(1 & bitmap),
+        configurable: !(2 & bitmap),
+        writable: !(4 & bitmap),
+        value: value
+    };
+}, fails$5 = fails$8, classof$3 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
+    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
+    // eslint-disable-next-line no-prototype-builtins -- safe
+    return !$Object$3("z").propertyIsEnumerable(0);
+})) ? function(it) {
+    return "String" === classof$3(it) ? split(it, "") : $Object$3(it);
+} : $Object$3, isNullOrUndefined$2 = function(it) {
+    return null == it;
+}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$3 = function(it) {
+    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
+    return it;
+}, IndexedObject = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
+    return IndexedObject(requireObjectCoercible$2(it));
+}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
+    return "object" == typeof it ? null !== it : isCallable$7(it);
+}, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
+    return isCallable$6(variable) ? variable : void 0;
+}, navigator = globalThis_1.navigator, userAgent$1 = navigator && navigator.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
+
+v8 && (
+// in old Chrome, versions of V8 isn't V8 = Chrome / 10
+// but their correct versions are not interesting for us
+version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
+// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
+// so check `userAgent` even if `.v8` exists, but 0
+!version && userAgent && (!(match = userAgent.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent.match(/Chrome\/(\d+)/)) && (version = +match[1]);
+
+var V8_VERSION = version, fails$4 = fails$8, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
+    var symbol = Symbol("symbol detection");
+    // Chrome 38 Symbol has incorrect toString conversion
+    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
+    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
+    // of course, fail.
+        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
+    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
+    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
+})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$1 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
+    return "symbol" == typeof it;
+} : function(it) {
+    var $Symbol = function(namespace, method) {
+        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$a[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$a[namespace] && globalThis$a[namespace][method];
+    }("Symbol");
+    return isCallable$5($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$2(it));
+}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$5 = TypeError, aCallable$2 = function(argument) {
+    if (isCallable$4(argument)) return argument;
+    throw new $TypeError$5(function(argument) {
+        try {
+            return $String$2(argument);
+        } catch (error) {
+            return "Object";
+        }
+    }(argument) + " is not a function");
+}, aCallable$1 = aCallable$2, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$4 = TypeError, sharedStore = {
+    exports: {}
+}, globalThis$6 = globalThis_1, defineProperty = Object.defineProperty, globalThis$5 = globalThis_1, store$1 = sharedStore.exports = globalThis$5["__core-js_shared__"] || function(key, value) {
+    try {
+        defineProperty(globalThis$6, key, {
+            value: value,
+            configurable: !0,
+            writable: !0
+        });
+    } catch (error) {
+        globalThis$6[key] = value;
+    }
+    return value;
+}("__core-js_shared__", {});
+
+/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
+    version: "3.43.0",
+    mode: "pure",
+    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
+    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
+    source: "https://github.com/zloirock/core-js"
+});
+
+var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
+    return hasOwnProperty($Object$1(requireObjectCoercible$1(it)), key);
+}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
+    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
+}, wellKnownSymbol$5 = function(name) {
+    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
+    WellKnownSymbolsStore[name];
+}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
+    if (!isObject$3(input) || isSymbol$1(input)) return input;
+    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$1(func));
+    if (exoticToPrim) {
+        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
+        !isObject$3(result) || isSymbol$1(result)) return result;
+        throw new $TypeError$3("Can't convert object to primitive value");
+    }
+    return void 0 === pref && (pref = "number"), function(input, pref) {
+        var fn, val;
+        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
+        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        throw new $TypeError$4("Can't convert object to primitive value");
+    }(input, pref);
+}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
+    var key = toPrimitive(argument, "string");
+    return isSymbol(key) ? key : key + "";
+}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
+        get: function() {
+            return 7;
+        }
+    }).a;
+    var it;
+})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+
+// `Object.getOwnPropertyDescriptor` method
+// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
+objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
+    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
+        return $getOwnPropertyDescriptor$1(O, P);
+    } catch (error) {/* empty */}
+    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
+};
+
+var fails$2 = fails$8, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
+    var value = data[normalize(feature)];
+    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$2(detection) : !!detection);
+}, normalize = isForced$1.normalize = function(string) {
+    return String(string).replace(replacement, ".").toLowerCase();
+}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable = aCallable$2, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
+        value: 42,
+        writable: !1
+    }).prototype;
+})), isObject$1 = isObject$5, $String$1 = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
+    if (isObject$1(argument)) return argument;
+    throw new $TypeError$2($String$1(argument) + " is not an object");
+}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+
+// `Object.defineProperty` method
+// https://tc39.es/ecma262/#sec-object.defineproperty
+objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
+        var current = $getOwnPropertyDescriptor(O, P);
+        current && current.writable && (O[P] = Attributes.value, Attributes = {
+            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
+            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
+            writable: !1
+        });
+    }
+    return $defineProperty(O, P, Attributes);
+} : $defineProperty : function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
+        return $defineProperty(O, P, Attributes);
+    } catch (error) {/* empty */}
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
+    return "value" in Attributes && (O[P] = Attributes.value), O;
+};
+
+var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
+    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
+} : function(object, key, value) {
+    return object[key] = value, object;
+}, globalThis$2 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+    return aCallable(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
+        return fn.apply(that, arguments);
+    };
+}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
+    var Wrapper = function(a, b, c) {
+        if (this instanceof Wrapper) {
+            switch (arguments.length) {
+              case 0:
+                return new NativeConstructor;
+
+              case 1:
+                return new NativeConstructor(a);
+
+              case 2:
+                return new NativeConstructor(a, b);
+            }
+            return new NativeConstructor(a, b, c);
+        }
+        return apply(NativeConstructor, this, arguments);
+    };
+    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$2 : STATIC ? globalThis$2[TARGET] : globalThis$2[TARGET] && globalThis$2[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$2) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
+}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
+    var n = +x;
+    return (n > 0 ? floor : ceil)(n);
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, min$1 = Math.min, globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$2 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
+    if (pureMethod) return pureMethod;
+    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+}, toIntegerOrInfinity = toIntegerOrInfinity$2, max = Math.max, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity$1(argument)) > 0 ? min$1(len, 9007199254740991) : 0;
+    var argument, len;
+}, createMethod = function(IS_INCLUDES) {
+    return function($this, el, fromIndex) {
+        var O = toIndexedObject($this), length = lengthOfArrayLike(O);
+        if (0 === length) return !IS_INCLUDES && -1;
+        var value, index = function(index, length) {
+            var integer = toIntegerOrInfinity(index);
+            return integer < 0 ? max(integer + length, 0) : min(integer, length);
+        }(fromIndex, length);
+        // Array#includes uses SameValueZero equality algorithm
+        // eslint-disable-next-line no-self-compare -- NaN check
+        if (IS_INCLUDES && el != el) {
+            for (;length > index; ) 
+            // eslint-disable-next-line no-self-compare -- NaN check
+            if ((value = O[index++]) != value) return !0;
+            // Array#indexOf ignores holes, Array#includes - not
+                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
+        return !IS_INCLUDES && -1;
+    };
+}, $includes = [ createMethod(!0), createMethod(!1) ][0];
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+_export({
+    target: "Array",
+    proto: !0,
+    forced: fails$8((function() {
+        // eslint-disable-next-line es/no-array-prototype-includes -- detection
+        return !Array(1).includes();
+    }))
+}, {
+    includes: function(el /* , fromIndex = 0 */) {
+        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var includes$4 = getBuiltInPrototypeMethod$2("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
+
+test[wellKnownSymbol$5("toStringTag")] = "z";
+
+var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
+    return arguments;
+}()), classof = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+    var O, tag, result;
+    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
+        try {
+            return it[key];
+        } catch (error) {/* empty */}
+    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
+}, $String = String, MATCH = wellKnownSymbol$5("match"), $ = _export, notARegExp = function(it) {
+    if (function(it) {
+        var isRegExp;
+        return isObject(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$2(it));
+    }(it)) throw new $TypeError("The method doesn't accept regular expressions");
+    return it;
+}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
+    if ("Symbol" === classof(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
+    return $String(argument);
+}, stringIndexOf = functionUncurryThis("".indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$({
+    target: "String",
+    proto: !0,
+    forced: !function(METHOD_NAME) {
+        var regexp = /./;
+        try {
+            "/./"[METHOD_NAME](regexp);
+        } catch (error1) {
+            try {
+                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
+            } catch (error2) {/* empty */}
+        }
+        return !1;
+    }("includes")
+}, {
+    includes: function(searchString /* , position = 0 */) {
+        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var includes$3 = getBuiltInPrototypeMethod$2("String", "includes"), isPrototypeOf = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype = Array.prototype, StringPrototype = String.prototype;
+
+const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.includes;
+    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
+})), SelectContext =  createContext(null), SelectOption =  memo((({value: value, children: children, disabled: disabled = !1, className: className = "", style: style}) => {
+    const context = useContext(SelectContext), label = "string" == typeof children ? children : value;
+    // We assume children is the label if it's a string, or we need a way to get label.
+    // For simplicity, we use children as label for registration if it's a string.
+        if (useEffect((() => {
+        if (context) return context.registerOption({
+            value: value,
+            label: label,
+            disabled: disabled
+        }), () => {
+            context.unregisterOption(value);
+        };
+    }), [ context, value, label, disabled ]), !context) return console.warn("SelectOption must be used within a Select component"), 
+    null;
+    const {selectedValue: selectedValue, onSelect: onSelect} = context, isSelected = Array.isArray(selectedValue) ? _includesInstanceProperty(selectedValue).call(selectedValue, value) : selectedValue === value;
+    return jsx("li", {
+        className: `${SELECT_CLASSES_SELECT_ITEM} ${className}`.trim(),
+        "data-value": value,
+        onClick: e => {
+            e.preventDefault(), e.stopPropagation(), disabled || onSelect(value, label);
+        },
+        style: style,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        children: jsxs("label", {
+            className: "c-checkbox",
+            style: {
+                pointerEvents: "none"
+            },
+            children: [ jsx("input", {
+                type: "checkbox",
+                className: "c-checkbox__input c-select__item-input",
+                checked: isSelected,
+                readOnly: !0,
+                disabled: disabled,
+                tabIndex: -1
+            }), jsx("div", {
+                className: "c-select__item-label",
+                children: children
+            }) ]
+        })
+    });
+}));
+
+SelectOption.displayName = "SelectOption";
+
 /**
  * Select - A component for dropdown selection
  */
-const Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
+const Select =  memo((({options: options, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass, children: children}) => {
     const {generateSelectClass: generateSelectClass} = 
     /**
  * Select state and functionality
@@ -1891,14 +2461,18 @@ const Select =  memo((({options: options = [], value: value, onChange: onChange,
         disabled: disabled,
         invalid: invalid,
         valid: valid
-    }), [isOpen, setIsOpen] = useState(!1), [selectedLabel, setSelectedLabel] = useState(placeholder), dropdownRef = useRef(null), panelRef = useRef(null), bodyRef = useRef(null), nativeSelectRef = useRef(null);
+    }), [isOpen, setIsOpen] = useState(!1), [selectedLabel, setSelectedLabel] = useState(placeholder), dropdownRef = useRef(null), panelRef = useRef(null), bodyRef = useRef(null), nativeSelectRef = useRef(null), [registeredOptions, setRegisteredOptions] = useState([]), registerOption = useCallback((option => {
+        setRegisteredOptions((prev => prev.some((o => o.value === option.value)) ? prev : [ ...prev, option ]));
+    }), []), unregisterOption = useCallback((value => {
+        setRegisteredOptions((prev => prev.filter((o => o.value !== value))));
+    }), []), hasOptionsProp = options && options.length > 0, activeOptions = hasOptionsProp ? options : registeredOptions;
     // Update selected label when value changes
     useEffect((() => {
         if (value) {
-            const selectedOption = options.find((opt => opt.value === value));
+            const selectedOption = activeOptions.find((opt => opt.value === value));
             selectedOption && setSelectedLabel(selectedOption.label);
         } else setSelectedLabel(placeholder);
-    }), [ value, options, placeholder ]), 
+    }), [ value, activeOptions, placeholder ]), 
     // Handle click outside to close dropdown
     useEffect((() => {
         const handleClickOutside = event => {
@@ -1910,93 +2484,106 @@ const Select =  memo((({options: options = [], value: value, onChange: onChange,
         };
     }), []);
     // Toggle dropdown
-    const selectContent = jsxs("div", {
-        className: `${selectClass} ${isOpen ? SELECT_CLASSES_IS_OPEN : ""}`,
-        ref: dropdownRef,
-        style: style,
-        "aria-expanded": isOpen,
-        children: [ jsxs("select", {
-            ref: nativeSelectRef,
-            value: value,
-            onChange: onChange,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            disabled: disabled,
-            required: required,
-            id: id,
-            name: name,
-            multiple: multiple,
-            "aria-label": ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            "aria-invalid": invalid,
-            style: {
-                display: "none"
-            },
-            children: [ placeholder && jsx("option", {
-                value: "",
-                disabled: !0,
-                children: placeholder
-            }), options.map((option => jsx("option", {
-                value: option.value,
-                disabled: option.disabled,
-                children: option.label
-            }, option.value))) ]
-        }), jsx("div", {
-            className: SELECT_CLASSES_SELECTED,
-            onClick: () => {
-                disabled || (!isOpen && bodyRef.current && panelRef.current ? bodyRef.current.style.height = `${panelRef.current.clientHeight}px` : bodyRef.current && (bodyRef.current.style.height = "0px"), 
-                setIsOpen(!isOpen));
-            },
-            "aria-disabled": disabled,
-            children: selectedLabel
-        }), jsx("i", {
-            className: `${SELECT_CLASSES_ICON_CARET} ${SELECT_CLASSES_TOGGLE_ICON}`
-        }), jsx("div", {
-            className: SELECT_CLASSES_SELECT_BODY,
-            ref: bodyRef,
-            style: {
-                height: 0
-            },
-            children: jsx("div", {
-                className: SELECT_CLASSES_SELECT_PANEL,
-                ref: panelRef,
-                children: jsx("ul", {
-                    className: SELECT_CLASSES_SELECT_ITEMS,
-                    children: options.map(((option, index) => jsx("li", {
-                        className: SELECT_CLASSES_SELECT_ITEM,
-                        "data-value": option.value,
-                        onClick: () => !option.disabled && (option => {
-                            if (setSelectedLabel(option.label), setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px"), 
-                            nativeSelectRef.current && (nativeSelectRef.current.value = option.value), onChange) {
-                                // Create a synthetic event
-                                const event = {
-                                    target: {
-                                        name: name,
-                                        value: option.value
-                                    }
-                                };
-                                onChange(event);
-                            }
-                        })(option),
-                        children: jsxs("label", {
-                            htmlFor: `SelectItem${index}`,
-                            className: "c-checkbox",
-                            children: [ jsx("input", {
-                                type: "checkbox",
-                                id: `SelectItem${index}`,
-                                className: "c-checkbox__input c-select__item-input",
-                                checked: value === option.value,
-                                readOnly: !0,
-                                disabled: option.disabled
-                            }), jsx("div", {
-                                className: "c-select__item-label",
-                                children: option.label
-                            }) ]
-                        })
-                    }, option.value)))
+    const handleItemClick = useCallback((option => {
+        if (setSelectedLabel(option.label), setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px"), 
+        nativeSelectRef.current && (nativeSelectRef.current.value = option.value), onChange) {
+            // Create a synthetic event
+            const event = {
+                target: {
+                    name: name,
+                    value: option.value
+                }
+            };
+            onChange(event);
+        }
+    }), [ onChange, name ]), onSelect = useCallback(((val, label) => {
+        handleItemClick({
+            value: val,
+            label: label
+        });
+    }), [ handleItemClick ]), contextValue = React.useMemo((() => ({
+        registerOption: registerOption,
+        unregisterOption: unregisterOption,
+        selectedValue: value,
+        onSelect: onSelect
+    })), [ registerOption, unregisterOption, value, onSelect ]), selectContent = jsx(SelectContext.Provider, {
+        value: contextValue,
+        children: jsxs("div", {
+            className: `${selectClass} ${isOpen ? SELECT_CLASSES_IS_OPEN : ""}`,
+            ref: dropdownRef,
+            style: style,
+            "aria-expanded": isOpen,
+            children: [ jsxs("select", {
+                ref: nativeSelectRef,
+                value: value,
+                onChange: onChange,
+                onBlur: onBlur,
+                onFocus: onFocus,
+                disabled: disabled,
+                required: required,
+                id: id,
+                name: name,
+                multiple: multiple,
+                "aria-label": ariaLabel,
+                "aria-describedby": ariaDescribedBy,
+                "aria-invalid": invalid,
+                style: {
+                    display: "none"
+                },
+                children: [ placeholder && jsx("option", {
+                    value: "",
+                    disabled: !0,
+                    children: placeholder
+                }), activeOptions.map((option => jsx("option", {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: option.label
+                }, option.value))) ]
+            }), jsx("div", {
+                className: SELECT_CLASSES_SELECTED,
+                onClick: () => {
+                    disabled || (!isOpen && bodyRef.current && panelRef.current ? bodyRef.current.style.height = `${panelRef.current.clientHeight}px` : bodyRef.current && (bodyRef.current.style.height = "0px"), 
+                    setIsOpen(!isOpen));
+                },
+                "aria-disabled": disabled,
+                children: selectedLabel
+            }), jsx("i", {
+                className: `${SELECT_CLASSES_ICON_CARET} ${SELECT_CLASSES_TOGGLE_ICON}`
+            }), jsx("div", {
+                className: SELECT_CLASSES_SELECT_BODY,
+                ref: bodyRef,
+                style: {
+                    height: 0
+                },
+                children: jsx("div", {
+                    className: SELECT_CLASSES_SELECT_PANEL,
+                    ref: panelRef,
+                    children: jsx("ul", {
+                        className: SELECT_CLASSES_SELECT_ITEMS,
+                        children: hasOptionsProp ? options.map(((option, index) => jsx("li", {
+                            className: SELECT_CLASSES_SELECT_ITEM,
+                            "data-value": option.value,
+                            onClick: () => !option.disabled && handleItemClick(option),
+                            children: jsxs("label", {
+                                htmlFor: `SelectItem${index}`,
+                                className: "c-checkbox",
+                                children: [ jsx("input", {
+                                    type: "checkbox",
+                                    id: `SelectItem${index}`,
+                                    className: "c-checkbox__input c-select__item-input",
+                                    checked: value === option.value,
+                                    readOnly: !0,
+                                    disabled: option.disabled
+                                }), jsx("div", {
+                                    className: "c-select__item-label",
+                                    children: option.label
+                                }) ]
+                            })
+                        }, option.value))) : children
+                    })
                 })
-            })
-        }) ]
+            }) ]
+        })
     });
     // Handle item selection
         if (glass) {
@@ -2006,7 +2593,7 @@ const Select =  memo((({options: options = [], value: value, onChange: onChange,
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: .2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -2020,7 +2607,7 @@ const Select =  memo((({options: options = [], value: value, onChange: onChange,
     return selectContent;
 }));
 
-Select.displayName = "Select";
+Select.displayName = "Select", Select.Option = SelectOption;
 
 /**
  * Textarea - A component for multiline text input
@@ -2094,7 +2681,7 @@ const Textarea =  memo( forwardRef((({value: value, defaultValue: defaultValue,
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: 1,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,