@shohojdhara/atomix 0.3.14 → 0.4.0

package/dist/index.js

@@ -1249,29 +1249,6 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         SIZES: [ "xs", "sm", "md", "lg", "xl", "none" ],
         DEFAULT: "md"
     }
-}, GLASS_CONTAINER = {
-    CLASSES: {
-        BASE: "c-glass-container",
-        GLASS: "c-glass-container__glass",
-        WARP: "c-glass-container__warp",
-        CONTENT: "c-glass-container__content",
-        OVERLAY: "c-glass-container__overlay",
-        OVERLAY_VISIBLE: "c-glass-container__overlay--visible",
-        OVERLAY_HIDDEN: "c-glass-container__overlay--hidden",
-        OVERLAY_BLEND: "c-glass-container__overlay-blend",
-        BORDER: "c-glass-container__border",
-        BORDER_OVERLAY: "c-glass-container__border-overlay",
-        HOVER_EFFECT: "c-glass-container__hover-effect",
-        ACTIVE_EFFECT: "c-glass-container__active-effect",
-        INTERACTION_EFFECT: "c-glass-container__interaction-effect",
-        ACTIVE: "c-glass-container--active",
-        CLICKABLE: "c-glass-container--clickable"
-    },
-    DISPLACEMENT_MAPS: {
-        STANDARD: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZGllbnQpIi8+PC9zdmc+",
-        POLAR: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icG9sYXIiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODA4MDgwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwb2xhcikiLz48L3N2Zz4=",
-        PROMINENT: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icHJvbWluZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMGMwYzAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3Byb21pbmVudCkiLz48L3N2Zz4="
-    }
 }, FOOTER = {
     SELECTORS: {
         FOOTER: ".c-footer",
@@ -1410,10 +1387,16 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
+        // Note: This default must match the SCSS variable --atomix-radius-md
+        // @see src/styles/01-settings/_settings.global.scss
         DEFAULT_CORNER_RADIUS: 16,
-        // Fallback value matching design system
         MAX_SIZE: 4096,
         // Maximum width/height for glass size
+        // Palette for internal calculations (matches design system base colors)
+        PALETTE: {
+            WHITE: "255, 255, 255",
+            BLACK: "0, 0, 0"
+        },
         // Gradient calculation constants
         GRADIENT: {
             BASE_ANGLE: 135,
@@ -1631,10 +1614,10 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
     y: 0
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
-    // More responsive calculation for overlight effects
+    // 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;
-    return Math.min(1.5, influence);
- // Cap influence for better control
+    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 => {
     if ("number" == typeof value) return Math.max(0, value);
     if ("string" != typeof value || !value.trim()) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
@@ -1865,7 +1848,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
 }, globalMousePosition: globalMousePosition = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, active: active = !1, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, 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 = {}, cornerRadius: cornerRadius = 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) => {
@@ -1980,28 +1963,29 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
             flowBlur: 1.2 * blurAmount
         };
         // Enhanced validation for liquid blur
-                if (!enableLiquidBlur || !rectCache || !globalMousePosition || "number" != typeof globalMousePosition.x || "number" != typeof globalMousePosition.y || isNaN(globalMousePosition.x) || isNaN(globalMousePosition.y)) return defaultBlur;
+                if (!enableLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
         try {
-            // Cache center and distance calculations
-            const center = calculateElementCenter(rectCache), distance = calculateDistance(globalMousePosition, center), maxDistance = Math.sqrt(rectCache.width * rectCache.width + rectCache.height * rectCache.height) / 2, normalizedDistance = Math.min(distance / maxDistance, 1), mouseInfluence = calculateMouseInfluence(mouseOffset), baseBlur = blurAmount + mouseInfluence * blurAmount * .4, edgeBlur = baseBlur * (.8 + .6 * (1.5 * normalizedDistance + .3 * mouseInfluence)), centerBlur = baseBlur * (.3 + .4 * (.3 * (1 - normalizedDistance) + .2 * mouseInfluence)), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, flowDirection = Math.atan2(deltaY, deltaX), flowBlur = baseBlur * (.4 + .6 * (.5 * Math.sin(flowDirection + mouseInfluence * Math.PI) + .5)), stateMultiplier = (isHovered ? 1.2 : 1) * (isActive ? 1.4 : 1);
+            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 —
+            // they belong on opacity layers, not the blur filter itself.
             return {
-                baseBlur: clampBlur(baseBlur * stateMultiplier),
-                edgeBlur: clampBlur(edgeBlur * stateMultiplier),
-                centerBlur: clampBlur(centerBlur * stateMultiplier),
-                flowBlur: clampBlur(flowBlur * stateMultiplier)
+                baseBlur: clampBlur(baseBlur),
+                edgeBlur: clampBlur(edgeBlur),
+                centerBlur: clampBlur(centerBlur),
+                flowBlur: clampBlur(flowBlur)
             };
         } catch (error) {
             return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
             defaultBlur;
         }
-    }), [ enableLiquidBlur, blurAmount, globalMousePosition, mouseOffset, isHovered, isActive, rectCache, style, glassSize ]), backdropStyle = React.useMemo((() => {
+    }), [ enableLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = React.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 ? {
-                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`
+                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(${validatedBaseBlur}px)`, `blur(${validatedEdgeBlur}px)`, `blur(${validatedCenterBlur}px)`, `blur(${validatedFlowBlur}px)` ].join(" ")} saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) 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})`
             };
             // Single-pass fallback: stronger radius to match perceived blur of multi-pass
                 } catch (error) {
@@ -2020,7 +2004,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                 "--atomix-glass-container-padding": padding || "0 0",
                 "--atomix-glass-container-radius": `${"number" != typeof cornerRadius || isNaN(cornerRadius) ? 0 : cornerRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
-                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${.4 + .002 * mx})`, `inset 0 -1px 0 rgba(0, 0, 0, ${.2 + .001 * Math.abs(my)})`, `inset 0 0 20px rgba(0, 0, 0, ${.08 + .001 * Math.abs(mx + my)})`, `0 2px 12px rgba(0, 0, 0, ${.12 + .002 * Math.abs(my)})` ].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": 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,
                 // 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",
@@ -2039,10 +2023,18 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]);
+    }), [ 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"));
+    };
     return jsxRuntime.jsx("div", {
-        ref: ref,
-        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${active ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
+        ref: el => {
+            // Apply force no-transition
+            setForceNoTransition(el), 
+            // Handle forwarded ref
+            "function" == typeof ref ? ref(el) : ref && (ref.current = el);
+        },
+        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
         style: {
             ...style,
             ...containerVars
@@ -2060,6 +2052,11 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
             onMouseUp: onMouseUp,
             children: [ jsxRuntime.jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
+                style: {
+                    zIndex: 1,
+                    position: "absolute",
+                    inset: 0
+                },
                 children: [ jsxRuntime.jsx(GlassFilter, {
                     blurAmount: blurAmount,
                     mode: mode,
@@ -2068,6 +2065,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsxRuntime.jsx("div", {
+                    ref: setForceNoTransition,
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`,
@@ -2089,9 +2087,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                 style: {
                     position: "relative",
                     textShadow: "var(--atomix-glass-container-text-shadow)",
-                    ...elasticity > 0 ? {
-                        zIndex: 100
-                    } : {}
+                    // Ensure content is always above the filter layer (zIndex 1)
+                    zIndex: elasticity > 0 ? 100 : 2
                 },
                 children: children
             }) ]
@@ -2209,12 +2206,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [internalMouseOffset, setInternalMouseOffset] = React.useState({
         x: 0,
         y: 0
-    }), [dynamicCornerRadius, setDynamicCornerRadius] = React.useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), effectiveCornerRadius = React.useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius, debugCornerRadius ]), effectiveReducedMotion = React.useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = React.useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = React.useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = React.useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = React.useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
+    }), [dynamicCornerRadius, setDynamicCornerRadius] = React.useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), effectiveCornerRadius = React.useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius ]), effectiveReducedMotion = React.useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = React.useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = React.useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = React.useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = React.useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
     // Extract border-radius from children
     React.useEffect((() => {
         const extractRadius = () => {
             try {
-                let extractedRadius = null, extractionSource = "default";
+                let extractedRadius = null;
                 if (contentRef.current) {
                     const firstChild = contentRef.current.firstElementChild;
                     if (firstChild) {
@@ -2231,15 +2228,14 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                                 return null;
                             }
                         })(firstChild);
-                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius, extractionSource = "DOM element");
+                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius);
                     }
                 }
                 if (null === extractedRadius) {
                     const childRadius = extractBorderRadiusFromChildren(children);
-                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius, 
-                    extractionSource = "React children");
+                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius);
                 }
-                null !== extractedRadius && extractedRadius > 0 ? setDynamicCornerRadius(extractedRadius) : "undefined" == typeof process || process.env;
+                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);
             }
@@ -2368,7 +2364,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         }
         if ("boolean" == typeof overLight && 
         // For boolean values, disable auto-detection
-        // Cache is automatically managed by WeakMap (no manual clearing needed)
         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);
@@ -2438,6 +2433,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
     // Transform calculations
     const calculateDirectionalScale = React.useCallback((() => {
+        if (!0 === overLight || "auto" === overLight && detectedOverLight || "object" == typeof overLight && null !== overLight && detectedOverLight) 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,
@@ -2451,7 +2447,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 ]), calculateFadeInFactor = React.useCallback((() => {
+    }), [ globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight ]), calculateFadeInFactor = React.useCallback((() => {
         if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return 0;
         const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
             x: edgeDistanceX,
@@ -2536,20 +2532,21 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             isOverLight: isOverLight,
             threshold: .7,
             opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: Math.min(1.8, Math.max(1, 1.4 + .3 * mouseInfluence)),
-            brightness: Math.min(1.2, Math.max(.7, .85 + .15 * mouseInfluence)),
-            saturationBoost: Math.min(2, Math.max(1, 1.3 + .4 * mouseInfluence)),
-            shadowIntensity: Math.min(1.5, Math.max(.5, .9 + .5 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, .7 + .3 * mouseInfluence))
+            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))
         };
         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: validatedContrast + .3 * mouseInfluence,
-                brightness: validatedBrightness + .15 * mouseInfluence,
-                saturationBoost: validatedSaturationBoost + .4 * mouseInfluence
+                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;
@@ -2683,19 +2680,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         debugOverLight: debugOverLight,
         enablePerformanceMonitoring: enablePerformanceMonitoring,
         children: children
-    }), isOverLight = overLightConfig.isOverLight, shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
+    }), isOverLight = React.useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
         ...style,
-        ...0 !== elasticity && !effectiveDisableEffects && {
+        ...!effectiveDisableEffects && {
             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 = {
+    }, 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 = React.useMemo((() => ({
         position: style.position || "absolute",
         top: style.top || 0,
         left: style.left || 0
-    }, adjustedSize = {
+    })), [ style.position, style.top, style.left ]), adjustedSize = React.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)
-    }, gradientValues = React.useMemo((() => {
+    })), [ style.position, style.width, style.height, glassSize.width, glassSize.height ]), gradientValues = React.useMemo((() => {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
         return {
             borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
@@ -2735,7 +2732,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
         };
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = React.useMemo((() => {
-        const whiteColor = "255, 255, 255", {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
+        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-transform": transformStyle || "none",
@@ -2746,20 +2743,20 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
             "--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]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[1]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[2]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[3]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
             "--atomix-glass-hover-1-opacity": opacityValues.hover1,
-            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
             "--atomix-glass-hover-2-opacity": opacityValues.hover2,
-            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
             "--atomix-glass-hover-3-opacity": opacityValues.hover3,
-            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
             "--atomix-glass-base-opacity": opacityValues.base,
-            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${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(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
             "--atomix-glass-overlay-opacity": opacityValues.over,
-            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
         };
-    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight ]), renderBackgroundLayer = layerType => jsxRuntime.jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsxRuntime.jsx("div", {
         className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
         style: {
             ...positionStyles,
@@ -2785,9 +2782,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             className: className,
             style: baseStyle,
             cornerRadius: effectiveCornerRadius,
-            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : overLightConfig.isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
+            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,
-            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : overLightConfig.isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
+            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,
             glassSize: glassSize,
             padding: padding,
@@ -2803,10 +2800,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             onMouseLeave: handleMouseLeave,
             onMouseDown: handleMouseDown,
             onMouseUp: handleMouseUp,
-            active: isActive,
             isHovered: isHovered,
             isActive: isActive,
-            overLight: overLightConfig.isOverLight,
+            overLight: isOverLight,
+            overLightConfig: {
+                contrast: overLightConfig.contrast,
+                brightness: overLightConfig.brightness,
+                shadowIntensity: overLightConfig.shadowIntensity,
+                borderOpacity: overLightConfig.borderOpacity
+            },
             onClick: onClick,
             mode: mode,
             transform: baseStyle.transform,
@@ -3144,7 +3146,11 @@ const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "cur
         // Add input validation
         "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
         return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
-    }
+    },
+    // Aliases for compatibility
+    plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
+    waves: (uv, mousePosition) => fragmentShaders.liquidMetal(uv, mousePosition),
+    noise: (uv, mousePosition) => fragmentShaders.appleFluid(uv, mousePosition)
 };
 
 // Adapted from https://github.com/shuding/liquid-glass
@@ -3538,46 +3544,12 @@ const Breadcrumb =  React.memo((({items: items, divider: divider, className: cla
     });
 }));
 
-/**
- * Button state and functionality
- * @param initialProps - Initial button properties
- * @returns Button state and methods
- */
-function useButton(initialProps) {
-    // Default button properties
-    const defaultProps = {
-        variant: "primary",
-        size: "md",
-        disabled: !1,
-        rounded: !1,
-        loading: !1,
-        fullWidth: !1,
-        block: !1,
-        active: !1,
-        selected: !1,
-        ...initialProps
-    };
-    /**
-   * Generate button class based on properties
-   * @param props - Button properties
-   * @returns Class string
-   */    return {
-        defaultProps: defaultProps,
-        generateButtonClass: props => {
-            const {variant: variant = defaultProps.variant, size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, rounded: rounded = defaultProps.rounded, iconOnly: iconOnly = !1, glass: glass = defaultProps.glass, loading: loading = defaultProps.loading, fullWidth: fullWidth = defaultProps.fullWidth, block: block = defaultProps.block, active: active = defaultProps.active, selected: selected = defaultProps.selected, className: className = ""} = props, sizeClass = "md" === size ? "" : `c-btn--${size}`, iconOnlyClass = iconOnly ? "c-btn--icon" : "", roundedClass = rounded ? "c-btn--rounded" : "", disabledClass = disabled ? "c-btn--disabled" : "", glassClass = glass ? "c-btn--glass" : "", loadingClass = loading ? BUTTON.CLASSES.LOADING : "", fullWidthClass = fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", blockClass = block ? BUTTON.CLASSES.BLOCK : "", activeClass = active ? BUTTON.CLASSES.ACTIVE : "", selectedClass = selected ? BUTTON.CLASSES.SELECTED : "";
-            return [ BUTTON.BASE_CLASS, `c-btn--${variant}`, sizeClass, iconOnlyClass, roundedClass, disabledClass, glassClass, loadingClass, fullWidthClass, blockClass, activeClass, selectedClass, className ].filter(Boolean).join(" ");
-        },
-        handleClick: handler => event => {
-            defaultProps.disabled || defaultProps.loading || !handler || handler(event);
-        }
-    };
-}
-
 /**
  * Spinner state and functionality
  * @param initialProps - Initial spinner properties
  * @returns Spinner state and methods
- */ function useSpinner(initialProps) {
+ */
+function useSpinner(initialProps) {
     // Default spinner properties
     const defaultProps = {
         variant: "primary",
@@ -3734,21 +3706,7 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
-    }) : icon;
-    // Determine if we should render as a link
-        useButton({
-        variant: variant,
-        size: size,
-        disabled: isDisabled,
-        rounded: rounded,
-        glass: glass,
-        loading: loading,
-        fullWidth: fullWidth,
-        block: block,
-        active: active,
-        selected: selected
-    });
-    const buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = React.useCallback((event => {
+    }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = React.useCallback((event => {
         isDisabled ? event.preventDefault() : onClick?.(event);
     }), [ isDisabled, onClick ]), handleMouseEnter = React.useCallback((event => {
         isDisabled || onHover?.(event);
@@ -3756,7 +3714,7 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
         isDisabled || onFocus?.(event);
     }), [ isDisabled, onFocus ]), handleBlurEvent = React.useCallback((event => {
         isDisabled || onBlur?.(event);
-    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", buttonContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", safeAriaLabel = ariaLabel || (iconOnly ? "string" == typeof label ? label : "string" == typeof children ? children : void 0 : void 0), buttonContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ loading && jsxRuntime.jsx("span", {
             className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT),
             "aria-hidden": "true",
@@ -3773,80 +3731,77 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
             children: buttonText
         }) ]
     }), buttonProps = {
-        ref: ref,
         className: buttonClass,
-        type: "button" !== Component || shouldRenderAsLink ? void 0 : type,
         onClick: handleClickEvent,
         onMouseEnter: onHover ? handleMouseEnter : void 0,
         onFocus: onFocus ? handleFocusEvent : void 0,
         onBlur: onBlur ? handleBlurEvent : void 0,
-        disabled: isDisabled && "button" === Component && !shouldRenderAsLink,
         "aria-disabled": isDisabled,
         "aria-busy": loading,
-        "aria-label": ariaLabel || (iconOnly ? label || children : void 0),
+        "aria-label": safeAriaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-expanded": ariaExpanded,
         "aria-controls": ariaControls,
         tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
         style: style,
         ...props
-    }, defaultGlassProps = {
-        displacementScale: 20,
-        blurAmount: 0,
-        saturation: 200,
-        elasticity: 0
-    }, glassProps = !0 === glass ? defaultGlassProps : {
-        ...defaultGlassProps,
-        ...glass
     };
-    // Handle click with loading check
-        // Render as anchor if href is provided
-    if (shouldRenderAsLink) {
-        const {ref: _, ...buttonPropsWithoutRef} = buttonProps, anchorButtonProps = {
-            ...buttonPropsWithoutRef,
-            type: void 0,
-            disabled: void 0
-        };
-        // Use custom LinkComponent if provided (e.g., Next.js Link)
-        if (LinkComponent) {
-            const LinkComp = LinkComponent, linkProps = {
-                ...anchorButtonProps,
-                ref: ref,
-                href: href,
-                target: target,
-                rel: "_blank" === target ? "noopener noreferrer" : void 0
-            }, linkElement = jsxRuntime.jsx(LinkComp, {
-                ...linkProps,
-                children: buttonContent
-            });
-            return glass ? jsxRuntime.jsx(AtomixGlass, {
-                ...glassProps,
-                children: linkElement
-            }) : linkElement;
-        }
-        // Fallback to regular anchor tag
-                const anchorElement = jsxRuntime.jsx("a", {
-            ...anchorButtonProps,
+    // Determine if we should render as a link
+    // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
+    // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
+    // This is a safe fallback for disabled links.
+        let content;
+    // Render as anchor if href is provided
+        if (shouldRenderAsLink) 
+    // Use custom LinkComponent if provided (e.g., Next.js Link)
+    if (LinkComponent) {
+        const LinkComp = LinkComponent, linkProps = {
+            ...buttonProps,
             ref: ref,
+            // LinkComponent usually forwards ref to anchor
             href: href,
             target: target,
-            rel: "_blank" === target ? "noopener noreferrer" : void 0,
+            rel: "_blank" === target ? "noopener noreferrer" : void 0
+        };
+        content = jsxRuntime.jsx(LinkComp, {
+            ...linkProps,
             children: buttonContent
         });
-        return glass ? jsxRuntime.jsx(AtomixGlass, {
-            ...glassProps,
-            children: anchorElement
-        }) : anchorElement;
-    }
+    } else 
+    // Fallback to regular anchor tag
+    content = jsxRuntime.jsx("a", {
+        ...buttonProps,
+        ref: ref,
+        href: href,
+        target: target,
+        rel: "_blank" === target ? "noopener noreferrer" : void 0,
+        children: buttonContent
+    }); else 
     // Default button rendering
-        const buttonElement = jsxRuntime.jsx(Component, {
+    content = jsxRuntime.jsx(Component, {
         ...buttonProps,
+        ref: ref,
+        type: "button" === Component ? type : void 0,
+        disabled: isDisabled,
         children: buttonContent
     });
-    return glass ? jsxRuntime.jsx(AtomixGlass, {
-        ...glassProps,
-        children: buttonElement
-    }) : buttonElement;
+    if (glass) {
+        // Default glass props
+        const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 0,
+            saturation: 200,
+            elasticity: 0
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsxRuntime.jsx(AtomixGlass, {
+            ...glassProps,
+            children: content
+        });
+    }
+    return content;
 })));
 
 Button.displayName = "Button";
@@ -8895,6 +8850,22 @@ const WaterfallChart =  React.memo( React.forwardRef((({waterfallData: waterfall
     });
 })));
 
+/**
+ * CSV Utility Functions
+ */
+/**
+ * Sanitize cell content to prevent CSV injection
+ *
+ * Replaces newlines and tabs with spaces, escapes double quotes,
+ * and prefixes dangerous characters (=, +, -, @) with a single quote
+ * to prevent formula injection.
+ */
+function sanitizeCSVCell(cell) {
+    const sanitized = String(cell ?? "").replace(/[\r\n\t]/g, " ").replace(/"/g, '""');
+    // Prevent formula injection by prefixing dangerous characters
+        return /^[=+\-@]/.test(sanitized) ? `'${sanitized}` : sanitized;
+}
+
 WaterfallChart.displayName = "WaterfallChart";
 
 const SIZE_MAP = {
@@ -9096,29 +9067,40 @@ function getRowId$1(row, rowKey) {
     } // Reset to first page when filtering
     ), []), clearColumnFilters = React.useCallback((() => {
         setColumnFilterValues({}), setCurrentPage(1);
-    }), []), filteredData = React.useMemo((() => {
-        let result = data;
-        // Apply global search
-                if (searchQuery) {
-            const lowercaseQuery = searchQuery.toLowerCase();
-            result = result.filter((row => visibleColumns.some((column => {
+    }), []), activeColumnFilters = React.useMemo((() => columnFilters ? Object.entries(columnFilterValues).filter((([, value]) => null != value && "" !== value)).map((([columnKey, value]) => {
+        const column = columns.find((col => col.key === columnKey));
+        return column && column.filterable ? {
+            key: columnKey,
+            value: value,
+            lowercaseValue: "string" == typeof value ? value.toLowerCase() : String(value).toLowerCase(),
+            column: column
+        } : null;
+    })).filter((f => null !== f)) : []), [ columnFilters, columnFilterValues, columns ]), filteredData = React.useMemo((() => {
+        if (!searchQuery && 0 === activeColumnFilters.length) return data;
+        const lowercaseQuery = searchQuery ? searchQuery.toLowerCase() : "";
+        return data.filter((row => {
+            // Apply global search
+            if (searchQuery && !visibleColumns.some((column => {
                 var _context;
                 const value = row[column.key];
                 return null != value && _includesInstanceProperty(_context = String(value).toLowerCase()).call(_context, lowercaseQuery);
-            }))));
-        }
-        // Apply column-specific filters
-                return columnFilters && (result = result.filter((row => Object.entries(columnFilterValues).every((([columnKey, filterValue]) => {
-            var _context2;
-            if (!filterValue) return !0;
-            const column = columns.find((col => col.key === columnKey));
-            if (!column || !column.filterable) return !0;
-            const cellValue = row[columnKey];
-            return null != cellValue && (
-            // Use custom filter function if provided
-            column.filterFunction ? column.filterFunction(cellValue, filterValue) : _includesInstanceProperty(_context2 = String(cellValue).toLowerCase()).call(_context2, filterValue.toLowerCase()));
-        }))))), result;
-    }), [ data, visibleColumns, searchQuery, columnFilterValues, columnFilters, columns ]), sortedData = React.useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
+            }))) return !1;
+            // Apply column-specific filters
+                        for (let i = 0; i < activeColumnFilters.length; i++) {
+                const filter = activeColumnFilters[i];
+                if (!filter) continue;
+                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = filter, cellValue = row[key];
+                if (null == cellValue) return !1;
+                // Use custom filter function if provided
+                                var _context2;
+                // Default text filter
+                                if (column.filterFunction) {
+                    if (!column.filterFunction(cellValue, value)) return !1;
+                } else if (!_includesInstanceProperty(_context2 = String(cellValue).toLowerCase()).call(_context2, lowercaseValue)) return !1;
+            }
+            return !0;
+        }));
+    }), [ data, visibleColumns, searchQuery, activeColumnFilters ]), sortedData = React.useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
         const aValue = a[sortConfig.key], bValue = b[sortConfig.key];
         return null == aValue ? "asc" === sortConfig.direction ? -1 : 1 : null == bValue ? "asc" === sortConfig.direction ? 1 : -1 : "string" == typeof aValue && "string" == typeof bValue ? "asc" === sortConfig.direction ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue) : "asc" === sortConfig.direction ? aValue > bValue ? 1 : -1 : aValue > bValue ? -1 : 1;
     })) : filteredData), [ filteredData, sortConfig, sortable ]), paginatedData = React.useMemo((() => {
@@ -9396,76 +9378,56 @@ const range = (start, end) => {
 
 Pagination.displayName = "Pagination", PaginationNavButton.displayName = "PaginationNavButton";
 
-/**
- * Checkbox state and functionality
- * @param initialProps - Initial checkbox properties
- * @returns Checkbox state and methods
- */
-function useCheckbox(initialProps) {
-    // Default checkbox properties
-    const defaultProps = {
-        disabled: !1,
-        invalid: !1,
-        valid: !1,
-        indeterminate: !1,
-        ...initialProps
-    }, checkboxRef = React.useRef(null);
-    // Ref for the checkbox input element
-        // Handle indeterminate state
-    return React.useEffect((() => {
-        checkboxRef.current && (checkboxRef.current.indeterminate = Boolean(defaultProps.indeterminate));
-    }), [ defaultProps.indeterminate ]), {
-        defaultProps: defaultProps,
-        generateCheckboxClass: props => {
-            const {disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, indeterminate: indeterminate = defaultProps.indeterminate, className: className = ""} = props;
-            let validationClass = "";
-            return invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid"), 
-            `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${className}`.trim();
-        },
-        checkboxRef: checkboxRef
-    };
-}
-
-/**
- * Checkbox - A component for checkbox inputs
- */ const Checkbox =  React.memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass}) => {
-    const {generateCheckboxClass: generateCheckboxClass, checkboxRef: checkboxRef} = useCheckbox({
-        indeterminate: indeterminate,
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid
-    }), checkboxClass = generateCheckboxClass({
-        className: `${className} ${glass ? "c-checkbox--glass" : ""}`.trim(),
+const Checkbox =  React__default.default.memo( React.forwardRef((({label: label, checked: checked, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass, ...props}, ref) => {
+    // Local ref to handle indeterminate state
+    const localRef = React.useRef(null);
+    // Merge refs
+        React.useImperativeHandle(ref, (() => localRef.current)), 
+    // Handle indeterminate
+    React.useEffect((() => {
+        localRef.current && (localRef.current.indeterminate = Boolean(indeterminate));
+    }), [ indeterminate ]);
+    // Generate classes
+    let validationClass = "";
+    invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid");
+    const checkboxClass = `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${glass ? "c-checkbox--glass" : ""} ${className}`.trim(), inputElement = jsxRuntime.jsx("input", {
+        ref: localRef,
+        type: "checkbox",
+        className: "c-checkbox__input",
+        checked: checked,
+        onChange: onChange,
+        onClick: onClick,
         disabled: disabled,
-        invalid: invalid,
-        valid: valid,
-        indeterminate: indeterminate
-    }), checkboxContent = jsxRuntime.jsxs("div", {
+        required: required,
+        id: id,
+        name: name,
+        value: value,
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid,
+        ...props
+    });
+    let content;
+    if (content = id && label ? jsxRuntime.jsxs("div", {
         className: checkboxClass,
         style: style,
-        children: [ jsxRuntime.jsx("input", {
-            ref: checkboxRef,
-            type: "checkbox",
-            className: "c-checkbox__input",
-            checked: checked,
-            onChange: onChange,
-            onClick: onClick,
-            disabled: disabled,
-            required: required,
-            id: id,
-            name: name,
-            value: value,
-            "aria-label": label ? void 0 : ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            "aria-invalid": invalid
-        }), label && jsxRuntime.jsx("label", {
+        children: [ inputElement, jsxRuntime.jsx("label", {
             className: "c-checkbox__label",
             htmlFor: id,
             children: label
         }) ]
-    });
-    if (glass) {
-        // Default glass settings for checkboxes
+    }) : label ? jsxRuntime.jsxs("label", {
+        className: checkboxClass,
+        style: style,
+        children: [ inputElement, jsxRuntime.jsx("span", {
+            className: "c-checkbox__label",
+            children: label
+        }) ]
+    }) : jsxRuntime.jsx("div", {
+        className: checkboxClass,
+        style: style,
+        children: inputElement
+    }), glass) {
         const defaultGlassProps = {
             displacementScale: 40,
             blurAmount: 1,
@@ -9479,11 +9441,11 @@ function useCheckbox(initialProps) {
         };
         return jsxRuntime.jsx(AtomixGlass, {
             ...glassProps,
-            children: checkboxContent
+            children: content
         });
     }
-    return checkboxContent;
-}));
+    return content;
+})));
 
 Checkbox.displayName = "Checkbox";
 
@@ -9669,18 +9631,6 @@ const DropdownContext =  React.createContext({
 
 /**
  * DropdownItem component for menu items
- */
-/**
- * Sanitize cell content to prevent CSV injection
- */
-function sanitizeCSVCell(cell) {
-    const sanitized = String(cell ?? "").replace(/[\r\n\t]/g, " ").replace(/"/g, '""');
-    // Prevent formula injection by prefixing dangerous characters
-        return /^[=+\-@]/.test(sanitized) ? `'${sanitized}` : sanitized;
-}
-
-/**
- * Export data as CSV
  */ Dropdown.displayName = "Dropdown", DropdownItem.displayName = "DropdownItem", 
 DropdownDivider.displayName = "DropdownDivider", DropdownHeader.displayName = "DropdownHeader";
 
@@ -9759,7 +9709,11 @@ const DataTable =  React.memo((({data: data, columns: columns, className: classN
             const defaultFilename = filename || "data-table";
             switch (format) {
               case "csv":
-                !function(data, columns, filename = "data-table.csv") {
+                !
+                /**
+ * Export data as CSV
+ */
+                function(data, columns, filename = "data-table.csv") {
                     if (!data.length || !columns.length) return;
                     // Create headers
                                         const headers = columns.map((col => col.title || col.key)), rows = data.map((row => columns.map((col => {
@@ -11123,6 +11077,8 @@ function useHero(initialProps) {
         contentWidth: void 0,
         parallax: !1,
         parallaxIntensity: .5,
+        headingLevel: "h1",
+        reverseOnMobile: !1,
         ...initialProps
     }, hasBackgroundSlider = !!defaultProps.backgroundSlider, backgroundSliderResult = 
     /**
@@ -11203,7 +11159,9 @@ function useHero(initialProps) {
         autoplay: {
             delay: 5e3,
             pauseOnHover: !0
-        }
+        },
+        transition: "fade",
+        transitionDuration: 1e3
     }), backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider ? backgroundSliderResult : void 0, hasBackgroundImage = !!hasBackgroundSlider || !!defaultProps.backgroundImageSrc || !!defaultProps.videoBackground, hasForegroundImage = !!defaultProps.imageSrc, useGridLayout = hasForegroundImage && "center" !== defaultProps.alignment, applyParallaxEffect = (element, intensity = .5) => {
         if (!element) return;
         // Ensure intensity is between 0 and 1
@@ -11254,13 +11212,20 @@ function useHero(initialProps) {
             defaultProps.videoBackground && classes.push("c-hero--video"), baseClassName && classes.push(baseClassName), 
             classes.join(" ");
         },
-        generateImageColClass: (size = defaultProps.imageColSize || 7) => {
+        generateImageColClass: (size = defaultProps.imageColSize || 7, customClass) => {
             const classes = [ `o-grid__col o-grid__col--md-${size}` ];
             // Add responsive margin if needed for mobile view
                         return "left" === defaultProps.alignment && classes.push("u-mt-5 u-mt-md-0"), 
-            classes.join(" ");
+            // Handle mobile stacking order
+            defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-first u-order-md-last") : classes.push("u-order-last u-order-md-first")), 
+            customClass && classes.push(customClass), classes.join(" ");
+        },
+        generateContentColClass: (size = defaultProps.contentColSize || 5, customClass) => {
+            const classes = [ `o-grid__col o-grid__col--md-${size}` ];
+            // Handle mobile stacking order
+                        return defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-last u-order-md-first") : classes.push("u-order-first u-order-md-last")), 
+            customClass && classes.push(customClass), classes.join(" ");
         },
-        generateContentColClass: (size = defaultProps.contentColSize || 5) => `o-grid__col o-grid__col--md-${size}`,
         hasBackgroundImage: hasBackgroundImage,
         hasForegroundImage: hasForegroundImage,
         useGridLayout: useGridLayout,
@@ -12474,6 +12439,8 @@ function useSlider(options) {
 }
 
 // Button composables
+// export * from './useButton';
+// Accordion composables
 var composablesImport =  Object.freeze({
     __proto__: null,
     DOTS: "...",
@@ -12483,12 +12450,10 @@ var composablesImport =  Object.freeze({
     useBarChart: useBarChart,
     useBlock: useBlock,
     useBreadcrumb: useBreadcrumb,
-    useButton: useButton,
     useCard: useCard,
     useChartData: useChartData,
     useChartInteraction: useChartInteraction,
     useChartScale: useChartScale,
-    useCheckbox: useCheckbox,
     useDataTable: useDataTable,
     useEdgePanel: useEdgePanel,
     useForm: useForm,
@@ -13532,12 +13497,14 @@ const FooterLink =  React.forwardRef((({href: href, icon: icon, external: extern
 
 FooterLink.displayName = "FooterLink";
 
-const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, contentColSize: contentColSize = 5, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
+const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, imageColClassName: imageColClassName, imageColStyle: imageColStyle, contentColSize: contentColSize = 5, contentColClassName: contentColClassName, contentColStyle: contentColStyle, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
     autoplay: !0,
     loop: !0,
     muted: !0
-}, backgroundSlider: backgroundSlider}) => {
-    const {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
+}, backgroundSlider: backgroundSlider, headingLevel: headingLevel = "h1", reverseOnMobile: reverseOnMobile = !1, parts: parts, ...rest}) => {
+    // Define dynamic heading tag
+    const HeadingTag = headingLevel, {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
+        title: title,
         alignment: alignment,
         imageColSize: imageColSize,
         contentColSize: contentColSize,
@@ -13549,7 +13516,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         parallax: parallax,
         parallaxIntensity: parallaxIntensity,
         videoBackground: videoBackground,
-        backgroundSlider: backgroundSlider
+        backgroundSlider: backgroundSlider,
+        reverseOnMobile: reverseOnMobile
     }), heroStyle = {
         ...contentWidth ? {
             "--atomix-hero-content-width": contentWidth
@@ -13573,18 +13541,23 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         });
     }, renderContent = () => {
         const content = jsxRuntime.jsxs("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: [ subtitle && jsxRuntime.jsx("p", {
-                className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                style: parts?.subtitle?.style,
                 children: subtitle
-            }), jsxRuntime.jsx("h1", {
-                className: HERO.SELECTORS.TITLE.replace(".", ""),
+            }), jsxRuntime.jsx(HeadingTag, {
+                className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                style: parts?.title?.style,
                 children: title
             }), text && jsxRuntime.jsx("p", {
-                className: HERO.SELECTORS.TEXT.replace(".", ""),
+                className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                style: parts?.text?.style,
                 children: text
             }), actions && jsxRuntime.jsx("div", {
-                className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                style: parts?.actions?.style,
                 children: actions
             }) ]
         });
@@ -13594,7 +13567,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         glass ? 
         // If glass is true, use default glass props
         !0 === glass ? jsxRuntime.jsx("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsxRuntime.jsx(AtomixGlass, {
                 displacementScale: 60,
                 blurAmount: 3,
@@ -13606,71 +13580,93 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 children: jsxRuntime.jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsxRuntime.jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsxRuntime.jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsxRuntime.jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         }) : jsxRuntime.jsx("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsxRuntime.jsx(AtomixGlass, {
                 ...glass,
                 children: jsxRuntime.jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsxRuntime.jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsxRuntime.jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsxRuntime.jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         }) : content;
     }, renderForegroundImage = () => hasForegroundImage ? "center" === alignment ? jsxRuntime.jsx("div", {
-        className: HERO.SELECTORS.IMAGE_WRAPPER.replace(".", ""),
+        className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${imageColClassName || ""} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsxRuntime.jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     }) : jsxRuntime.jsx("div", {
-        className: generateImageColClass(),
+        className: `${generateImageColClass(imageColSize, imageColClassName)} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsxRuntime.jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     }) : null;
-    // Create custom style for hero element with content width if provided
-        return jsxRuntime.jsxs("div", {
+    return jsxRuntime.jsxs("div", {
         ref: heroRef,
-        className: generateHeroClassNames(className),
-        style: heroStyle,
+        className: `${generateHeroClassNames(className)} ${parts?.root?.className || ""}`.trim(),
+        style: {
+            ...heroStyle,
+            ...parts?.root?.style
+        },
         "data-parallax": parallax ? "true" : void 0,
         "data-parallax-intensity": parallax ? parallaxIntensity : void 0,
+        ...rest,
         children: [ (() => {
             // Render background slider if configured
             if (hasBackgroundSlider && backgroundSlider && sliderHook) {
                 const {slides: slides, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = backgroundSlider, {currentIndex: currentIndex, slideRefs: slideRefs, videoRefs: videoRefs} = sliderHook;
                 // Determine transition class
                 let transitionClass = HERO.CLASSES.SLIDER_FADE;
-                return "slide" === transition ? transitionClass = HERO.CLASSES.SLIDER_SLIDE : "custom" === transition && (transitionClass = HERO.CLASSES.SLIDER_CUSTOM), 
+                return "slide" === transition && (transitionClass = HERO.CLASSES.SLIDER_SLIDE), 
                 jsxRuntime.jsxs("div", {
                     className: `${HERO.SELECTORS.SLIDER.replace(".", "")} ${transitionClass}`,
                     style: {
@@ -13687,57 +13683,68 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                         return jsxRuntime.jsx("div", {
                             ref: slideRef,
                             className: `${HERO.SELECTORS.SLIDER_ITEM.replace(".", "")} ${isActive ? HERO.CLASSES.SLIDER_ITEM_ACTIVE : ""}`,
-                            children: "image" === slide.type ? jsxRuntime.jsx("img", {
-                                src: slide.src,
-                                alt: slide.alt || "Background slide",
-                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
-                            }) : jsxRuntime.jsxs("video", {
+                            "aria-hidden": !isActive,
+                            children: "video" === slide.type ? jsxRuntime.jsxs("video", {
                                 ref: videoRef,
-                                className: "c-hero__video",
-                                autoPlay: !1 !== slide.videoOptions?.autoplay,
-                                loop: !1 !== slide.videoOptions?.loop,
-                                muted: !1 !== slide.videoOptions?.muted,
+                                className: "c-hero__bg-video",
+                                src: slide.src,
+                                poster: slide.videoOptions?.posterUrl || slide.alt,
+                                muted: slide.videoOptions?.muted ?? !0,
+                                loop: slide.videoOptions?.loop ?? !0,
                                 playsInline: !0,
-                                poster: slide.videoOptions?.posterUrl,
+                                "aria-hidden": "true",
+                                autoPlay: !1 !== slide.videoOptions?.autoplay,
                                 children: [ jsxRuntime.jsx("source", {
                                     src: slide.src,
                                     type: `video/${slide.src.split(".").pop() || "mp4"}`
                                 }), "Your browser does not support the video tag." ]
+                            }) : jsxRuntime.jsx("img", {
+                                src: slide.src,
+                                alt: slide.alt || "Background slide",
+                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                             })
                         }, index);
                     })), showOverlay && jsxRuntime.jsx("div", {
-                        className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                        className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                        style: parts?.overlay?.style
                     }) ]
                 });
             }
             // Fall back to single background image/video
                         return hasBackgroundImage || videoBackground ? jsxRuntime.jsxs("div", {
-                className: HERO.SELECTORS.BG.replace(".", ""),
+                className: `${HERO.SELECTORS.BG.replace(".", "")} ${parts?.background?.className || ""}`.trim(),
+                style: parts?.background?.style,
                 children: [ backgroundImageSrc && jsxRuntime.jsx("img", {
                     src: backgroundImageSrc,
                     alt: "Background",
                     className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                 }), renderVideoBackground(), showOverlay && jsxRuntime.jsx("div", {
-                    className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                    className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                    style: parts?.overlay?.style
                 }) ]
             }) : null;
         })(), jsxRuntime.jsx("div", {
-            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container`,
+            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container ${parts?.container?.className || ""}`.trim(),
+            style: parts?.container?.style,
             children: children ? jsxRuntime.jsx("div", {
-                className: HERO.SELECTORS.GRID.replace(".", ""),
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: children
             }) : useGridLayout ? jsxRuntime.jsx("div", {
-                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid`,
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: 
                 // For left-aligned content, render content first then image
                 "left" === alignment ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [ jsxRuntime.jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }), renderForegroundImage() ]
                 }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [ renderForegroundImage(), jsxRuntime.jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }) ]
                 })
@@ -17392,7 +17399,7 @@ const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1
         if (disabled) return;
         const nextChecked = !isChecked;
         isControlled || setInternalChecked(nextChecked), onChange?.(nextChecked);
-    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", className ].filter(Boolean).join(" "), toggleContent = jsxRuntime.jsx("div", {
+    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", glass && "c-toggle--glass", className ].filter(Boolean).join(" "), toggleContent = jsxRuntime.jsx("div", {
         className: toggleClass,
         style: style,
         onClick: handleClick,
@@ -18768,7 +18775,6 @@ var components =  Object.freeze({
     FOOTER: FOOTER,
     FORM: FORM,
     FORM_GROUP: FORM_GROUP,
-    GLASS_CONTAINER: GLASS_CONTAINER,
     HERO: HERO,
     INPUT: INPUT,
     LIST: LIST,
@@ -24465,17 +24471,17 @@ exports.ElevationCard = ElevationCard, exports.FOOTER = FOOTER, exports.FORM = F
 exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, exports.FooterLink = FooterLink, 
 exports.FooterSection = FooterSection, exports.FooterSocialLink = FooterSocialLink, 
 exports.Form = Form, exports.FormGroup = FormGroup, exports.FunnelChart = FunnelChart, 
-exports.GLASS_CONTAINER = GLASS_CONTAINER, exports.GaugeChart = GaugeChart, exports.Grid = Grid, 
-exports.GridCol = GridCol, exports.HERO = HERO, exports.HeatmapChart = HeatmapChart, 
-exports.Hero = Hero, exports.INPUT = INPUT, exports.INPUT_CSS_VARS = INPUT_CSS_VARS, 
-exports.Icon = Icon, exports.Input = Input, exports.LIST = LIST, exports.LIST_GROUP = LIST_GROUP, 
-exports.LineChart = LineChart, exports.List = List, exports.ListGroup = ListGroup, 
-exports.MESSAGES = MESSAGES, exports.MODAL = MODAL, exports.MODAL_CSS_VARS = MODAL_CSS_VARS, 
-exports.MasonryGrid = MasonryGrid, exports.MasonryGridItem = MasonryGridItem, exports.MegaMenu = MegaMenu, 
-exports.MegaMenuColumn = MegaMenuColumn, exports.MegaMenuLink = MegaMenuLink, exports.Menu = Menu, 
-exports.MenuDivider = MenuDivider, exports.MenuItem = MenuItem, exports.Messages = Messages, 
-exports.Modal = Modal, exports.MultiAxisChart = MultiAxisChart, exports.NAV = NAV, 
-exports.NAVBAR = NAVBAR, exports.Nav = Nav, exports.NavDropdown = NavDropdown, exports.NavItem = NavItem, 
+exports.GaugeChart = GaugeChart, exports.Grid = Grid, exports.GridCol = GridCol, 
+exports.HERO = HERO, exports.HeatmapChart = HeatmapChart, exports.Hero = Hero, exports.INPUT = INPUT, 
+exports.INPUT_CSS_VARS = INPUT_CSS_VARS, exports.Icon = Icon, exports.Input = Input, 
+exports.LIST = LIST, exports.LIST_GROUP = LIST_GROUP, exports.LineChart = LineChart, 
+exports.List = List, exports.ListGroup = ListGroup, exports.MESSAGES = MESSAGES, 
+exports.MODAL = MODAL, exports.MODAL_CSS_VARS = MODAL_CSS_VARS, exports.MasonryGrid = MasonryGrid, 
+exports.MasonryGridItem = MasonryGridItem, exports.MegaMenu = MegaMenu, exports.MegaMenuColumn = MegaMenuColumn, 
+exports.MegaMenuLink = MegaMenuLink, exports.Menu = Menu, exports.MenuDivider = MenuDivider, 
+exports.MenuItem = MenuItem, exports.Messages = Messages, exports.Modal = Modal, 
+exports.MultiAxisChart = MultiAxisChart, exports.NAV = NAV, exports.NAVBAR = NAVBAR, 
+exports.Nav = Nav, exports.NavDropdown = NavDropdown, exports.NavItem = NavItem, 
 exports.Navbar = Navbar, exports.PAGINATION_DEFAULTS = PAGINATION_DEFAULTS, exports.PHOTOVIEWER = PHOTOVIEWER, 
 exports.POPOVER = POPOVER, exports.PROGRESS = PROGRESS, exports.PROGRESS_CSS_VARS = PROGRESS_CSS_VARS, 
 exports.Pagination = Pagination, exports.PhotoViewer = PhotoViewer, exports.PieChart = PieChart, 
@@ -24766,9 +24772,9 @@ function(theme, selector = ":root") {
     });
 }, exports.types = types, exports.unregisterTheme = unregisterTheme, exports.useAccordion = useAccordion, 
 exports.useAtomixGlass = useAtomixGlass, exports.useBadge = useBadge, exports.useBarChart = useBarChart, 
-exports.useBlock = useBlock, exports.useBreadcrumb = useBreadcrumb, exports.useButton = useButton, 
-exports.useCard = useCard, exports.useChartData = useChartData, exports.useChartInteraction = useChartInteraction, 
-exports.useChartScale = useChartScale, exports.useCheckbox = useCheckbox, exports.useComponentCustomization = 
+exports.useBlock = useBlock, exports.useBreadcrumb = useBreadcrumb, exports.useCard = useCard, 
+exports.useChartData = useChartData, exports.useChartInteraction = useChartInteraction, 
+exports.useChartScale = useChartScale, exports.useComponentCustomization = 
 /**
  * Hook to merge theme overrides with component props
  *