@shohojdhara/atomix 0.5.0 → 0.5.2

package/dist/index.js

@@ -1718,6 +1718,7 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
     FILTER_OVERLAY_CLASS: "c-atomix-glass__filter-overlay",
     FILTER_SHADOW_CLASS: "c-atomix-glass__filter-shadow",
     CONTENT_CLASS: "c-atomix-glass__content",
+    BORDER_BACKDROP_CLASS: "c-atomix-glass__border-backdrop",
     BORDER_1_CLASS: "c-atomix-glass__border-1",
     BORDER_2_CLASS: "c-atomix-glass__border-2",
     HOVER_1_CLASS: "c-atomix-glass__hover-1",
@@ -1987,19 +1988,19 @@ function useAccordion(initialProps) {
         disabled: !1,
         iconPosition: "right",
         ...initialProps
-    }, isControlled = "boolean" == typeof defaultProps.isOpen, [internalOpen, setInternalOpen] = React.useState(defaultProps.defaultOpen || !1), isOpen = isControlled ? defaultProps.isOpen : internalOpen, [panelHeight, setPanelHeight] = React.useState(isOpen ? "auto" : "0px"), panelRef = React.useRef(null), contentRef = React.useRef(null), updatePanelHeight = () => {
+    }, isControlled = "boolean" == typeof defaultProps.isOpen, [internalOpen, setInternalOpen] = React.useState(defaultProps.defaultOpen || !1), isOpen = isControlled ? defaultProps.isOpen : internalOpen, [panelHeight, setPanelHeight] = React.useState(isOpen ? "auto" : "0px"), panelRef = React.useRef(null), contentRef = React.useRef(null), updatePanelHeight = React.useCallback((() => {
         if (contentRef.current && panelRef.current) {
             const height = isOpen ? `${contentRef.current.clientHeight}px` : "0px";
             panelRef.current.style.setProperty(ACCORDION.CSS_VARS.PANEL_HEIGHT, height), setPanelHeight(height);
         }
-    };
+    }), [ isOpen ]);
     // Controlled/uncontrolled open state
         /**
    * Effect to update panel height when open state changes
    */
     return React.useEffect((() => {
         updatePanelHeight();
-    }), [ isOpen ]), 
+    }), [ isOpen, updatePanelHeight ]), 
     /**
    * Effect to handle window resize and update panel height
    */
@@ -2008,7 +2009,7 @@ function useAccordion(initialProps) {
             isOpen && updatePanelHeight();
         };
         return window.addEventListener("resize", handleResize), () => window.removeEventListener("resize", handleResize);
-    }), [ isOpen ]), {
+    }), [ isOpen, updatePanelHeight ]), {
         state: {
             isOpen: isOpen,
             panelHeight: panelHeight
@@ -2120,7 +2121,7 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
       default:
         return console.warn("AtomixGlass: Invalid displacement mode"), displacementMap;
     }
-}, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsxRuntime.jsx("svg", {
+}, sharedShaderCache = new Map, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsxRuntime.jsx("svg", {
     style: {
         position: "absolute",
         width: "100%",
@@ -2261,24 +2262,17 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount));
-
-// Module-level counter for deterministic ID generation
-let idCounter = 0;
-
-// Module-level shared shader cache with LRU eviction
-const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), AtomixGlassContainer =  React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
 }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, 
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, 
 // Phase 1: Animation System props
 shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
-    // Generate a stable, deterministic ID for SSR compatibility
-    // Use a module-level counter that's consistent across server and client
-    const filterId = React.useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null), shaderUpdateTimeoutRef = React.useRef(null), animationFrameRef = React.useRef(null);
+    // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
+    const rawId = React.useId(), filterId = React.useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null), shaderUpdateTimeoutRef = React.useRef(null), animationFrameRef = React.useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     React.useEffect((() => {
         "shader" === mode ? 
@@ -2303,9 +2297,7 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
             // Create cache key from size and variant
             const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`, cachedUrl = (key => {
                 const entry = sharedShaderCache.get(key);
-                return entry ? (
-                // Update access timestamp for LRU
-                entry.timestamp = Date.now(), entry.url) : null;
+                return entry ? (entry.timestamp = Date.now(), entry.url) : null;
             })(cacheKey);
             // Check shared cache first
                         if (cachedUrl) return void setShaderMapUrl(cachedUrl);
@@ -2316,29 +2308,24 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
                 if (shaderUtilsRef.current) try {
                     const {ShaderDisplacementGenerator: ShaderDisplacementGenerator, fragmentShaders: fragmentShaders} = shaderUtilsRef.current;
                     shaderGeneratorRef.current?.destroy();
-                    const selectedShader = fragmentShaders[shaderVariant] || fragmentShaders.liquidGlass;
+                    const selectedShader = fragmentShaders[shaderVariant] ?? fragmentShaders.liquidGlass;
                     shaderGeneratorRef.current = new ShaderDisplacementGenerator({
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
                     }), shaderUpdateTimeoutRef.current = setTimeout((() => {
-                        const url = shaderGeneratorRef.current?.updateShader() || "";
+                        const url = shaderGeneratorRef.current?.updateShader() ?? "";
                         url && ((key, url) => {
-                            // Evict oldest entries if at capacity
                             if (sharedShaderCache.size >= 15) {
                                 const entries = Array.from(sharedShaderCache.entries());
-                                // Sort by timestamp (oldest first)
-                                                                entries.sort(((a, b) => a[1].timestamp - b[1].timestamp));
-                                // Remove oldest entry
-                                const oldestEntry = entries[0];
-                                oldestEntry && sharedShaderCache.delete(oldestEntry[0]);
+                                entries.sort(((a, b) => a[1].timestamp - b[1].timestamp));
+                                const oldest = entries[0];
+                                oldest && sharedShaderCache.delete(oldest[0]);
                             }
                             sharedShaderCache.set(key, {
                                 url: url,
                                 timestamp: Date.now()
-                            }), 
-                            // Development mode: log cache size
-                            "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
+                            }), "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
                         })(cacheKey, url), setShaderMapUrl(url);
                     }), 100);
                 } catch (error) {
@@ -2407,7 +2394,6 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
             console.warn("AtomixGlassContainer: Error getting element bounds", error), setRectCache(null);
         }
     }), [ ref, glassSize ]);
-    // Pre-calculate static multipliers outside useMemo
     const liquidBlur = React.useMemo((() => {
         const defaultBlur = {
             baseBlur: blurAmount,
@@ -2476,7 +2462,6 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     }), [ borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects, overLightConfig ]);
     return jsxRuntime.jsx("div", {
         ref: el => {
-            // Apply force no-transition
             // Handle forwarded ref
             "function" == typeof ref ? ref(el) : ref && (ref.current = el);
         },
@@ -2518,6 +2503,7 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     });
 }));
 
+// ─── Blur multiplier constants (module-level, never change at runtime) ────────
 AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
@@ -2718,8 +2704,6 @@ class {
         backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
         // Container variables
                 const style = containerElement.style;
-        style.setProperty("--atomix-glass-container-width", isFixedOrSticky ? `${glassSize.width}` : "100%"), 
-        style.setProperty("--atomix-glass-container-height", isFixedOrSticky ? `${glassSize.height}` : "100%"), 
         style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
         style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
         // Shadows
@@ -3180,47 +3164,55 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             return "undefined" == typeof process || process.env, finalConfig;
         }
         return "undefined" == typeof process || process.env, baseConfig;
-    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = React.useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = React.useRef(null), handleGlobalMousePosition = React.useCallback((globalPos => {
-        if (externalGlobalMousePosition && externalMouseOffset) return;
-        if (effectiveWithoutEffects) return;
-        const container = mouseContainer?.current || glassRef.current;
-        if (!container) return;
-        // Use cached rect if available, otherwise get new one
-                let rect = cachedRectRef.current;
-        if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
-        cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
-        const center = calculateElementCenter(rect);
-        // Write raw target — the lerp loop will smoothly pursue it
-                targetMouseOffsetRef.current = {
-            x: (globalPos.x - center.x) / rect.width * 100,
-            y: (globalPos.y - center.y) / rect.height * 100
-        }, targetGlobalMousePositionRef.current = globalPos;
-    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), startLerpLoop = React.useCallback((() => {
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = React.useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = React.useRef(null), stopLerpLoop = React.useCallback((() => {
+        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
+        lerpRafRef.current = null);
+    }), []), startLerpLoop = React.useCallback((() => {
         if (lerpActiveRef.current) return;
         lerpActiveRef.current = !0;
         const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
             if (!lerpActiveRef.current) return;
-            // Add ref validity check to prevent memory leaks
-                        if (!glassRef.current || !wrapperRef?.current) return void (lerpActiveRef.current = !1);
+            if (!glassRef.current) return void (lerpActiveRef.current = !1);
             const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, dx = tgt.x - cur.x, dy = tgt.y - cur.y;
             // If we're close enough, snap and park
-            if (Math.abs(dx) < .05 && Math.abs(dy) < .05) internalMouseOffsetRef.current = {
+            if (Math.abs(dx) < .01 && Math.abs(dy) < .01) return internalMouseOffsetRef.current = {
                 ...tgt
             }, internalGlobalMousePositionRef.current = {
                 ...targetGlobalMousePositionRef.current
-            }; else {
-                internalMouseOffsetRef.current = {
-                    x: lerp$1(cur.x, tgt.x, LERP_T),
-                    y: lerp$1(cur.y, tgt.y, LERP_T)
-                };
-                const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
-                internalGlobalMousePositionRef.current = {
-                    x: lerp$1(curG.x, tgtG.x, LERP_T),
-                    y: lerp$1(curG.y, tgtG.y, LERP_T)
-                };
-            }
-            // Imperative style update with the smoothed values
-                        updateAtomixGlassStyles(wrapperRef.current, glassRef.current, {
+            }, 
+            // Final update and stop
+            updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+                mouseOffset: internalMouseOffsetRef.current,
+                globalMousePosition: internalGlobalMousePositionRef.current,
+                glassSize: glassSize,
+                isHovered: isHovered,
+                isActive: isActive,
+                isOverLight: overLightConfig.isOverLight,
+                baseOverLightConfig: overLightConfig,
+                effectiveBorderRadius: effectiveBorderRadius,
+                effectiveWithoutEffects: effectiveWithoutEffects,
+                effectiveReducedMotion: effectiveReducedMotion,
+                elasticity: elasticity,
+                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
+                onClick: onClick,
+                withLiquidBlur: withLiquidBlur,
+                blurAmount: blurAmount,
+                saturation: saturation,
+                padding: padding,
+                isFixedOrSticky: isFixedOrSticky
+            }), void stopLerpLoop();
+            // Smooth step
+                        internalMouseOffsetRef.current = {
+                x: lerp$1(cur.x, tgt.x, LERP_T),
+                y: lerp$1(cur.y, tgt.y, LERP_T)
+            };
+            const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
+            internalGlobalMousePositionRef.current = {
+                x: lerp$1(curG.x, tgtG.x, LERP_T),
+                y: lerp$1(curG.y, tgtG.y, LERP_T)
+            }, 
+            // Imperative style update
+            updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
                 mouseOffset: internalMouseOffsetRef.current,
                 globalMousePosition: internalGlobalMousePositionRef.current,
                 glassSize: glassSize,
@@ -3243,10 +3235,24 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         };
  // 0.08 – lower = more viscous
                 lerpRafRef.current = requestAnimationFrame(tick);
-    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky ]), stopLerpLoop = React.useCallback((() => {
-        lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
-        lerpRafRef.current = null);
-    }), []);
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky, stopLerpLoop ]), handleGlobalMousePosition = React.useCallback((globalPos => {
+        if (externalGlobalMousePosition && externalMouseOffset) return;
+        if (effectiveWithoutEffects) return;
+        const container = mouseContainer?.current || glassRef.current;
+        if (!container) return;
+        // Use cached rect if available, otherwise get new one
+                let rect = cachedRectRef.current;
+        if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
+        cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
+        const center = calculateElementCenter(rect);
+        // Write raw target — the lerp loop will smoothly pursue it
+                targetMouseOffsetRef.current = {
+            x: (globalPos.x - center.x) / rect.width * 100,
+            y: (globalPos.y - center.y) / rect.height * 100
+        }, targetGlobalMousePositionRef.current = globalPos, 
+        // Ensure the lerp loop is running to smoothly chase the new target
+        lerpActiveRef.current || startLerpLoop();
+    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects, startLerpLoop ]);
     /**
    * Validate and clamp a numeric config value
    */    
@@ -3255,7 +3261,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
-        // Start the lerp loop — it will smoothly chase the target
+        // Initial start
                 startLerpLoop();
         const container = mouseContainer?.current || glassRef.current;
         let resizeObserver = null;
@@ -3268,7 +3274,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             unsubscribe(), stopLerpLoop(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
             updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
         };
-    }), [ handleGlobalMousePosition, startLerpLoop, stopLerpLoop, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
+    }), [ externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects, handleGlobalMousePosition, startLerpLoop, stopLerpLoop, mouseContainer, glassRef ]), 
     // Also call updateStyles on other state changes (hover, active, etc)
     React.useEffect((() => {
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
@@ -3763,183 +3769,146 @@ function usePerformanceMonitor(config = {}) {
     }
 }
 
+/** Map an FPS value to a semantic color token string. */ const getQualityColor = quality => {
+    switch (quality) {
+      case "high":
+        return "var(--atomix-color-success, #4ade80)";
+
+      case "medium":
+        return "var(--atomix-color-warning, #fbbf24)";
+
+      case "low":
+        return "var(--atomix-color-danger, #ef4444)";
+
+      default:
+        return "#9ca3af";
+    }
+}, getFpsLabel = fps => fps >= 58 ? "Optimal" : fps >= 45 ? "Warning" : "Critical";
+
+/** Map a quality level string to a semantic color token string. */
+// Inject keyframes once
+if ("undefined" != typeof document) {
+    const styleId = "perf-dashboard-keyframes";
+    if (!document.getElementById(styleId)) {
+        const styleEl = document.createElement("style");
+        styleEl.id = styleId, styleEl.textContent = "\n@keyframes perf-dashboard-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n", 
+        document.head.appendChild(styleEl);
+    }
+}
+
 /**
- * PerformanceDashboard - Real-time performance monitoring overlay
+ * PerformanceDashboard - Real-time performance monitoring overlay.
  *
- * Displays:
- * - Current FPS with color coding
- * - Frame time statistics
- * - Quality level indicator
- * - GPU memory usage (if available)
- * - Auto-scaling status
- */ const PerformanceDashboard = ({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
-    // Get color for FPS display
-    const getFpsColor = fps => fps >= 58 ? "#4ade80" : // Green - good
-    fps >= 45 ? "#fbbf24" : "#ef4444" // Red - critical
-    , dashboardStyle = React.useMemo((() => ({
-        position: "fixed",
-        top: "16px",
-        right: "16px",
-        padding: "12px 16px",
-        backgroundColor: "rgba(17, 24, 39, 0.95)",
-        borderRadius: "8px",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-        fontFamily: "monospace",
-        fontSize: "12px",
-        color: "#fff",
-        zIndex: 9999,
-        minWidth: "200px",
-        backdropFilter: "blur(8px)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
-        transition: "opacity 0.3s ease",
-        opacity: isVisible ? 1 : 0,
-        pointerEvents: isVisible ? "auto" : "none"
-    })), [ isVisible ]), headerStyle = React.useMemo((() => ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: "8px",
-        paddingBottom: "8px",
-        borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
-    })), []), titleStyle = React.useMemo((() => ({
-        fontWeight: "bold",
-        fontSize: "13px",
-        color: "#fff"
-    })), []), closeButtonStyle = React.useMemo((() => ({
-        background: "transparent",
-        border: "none",
-        color: "#9ca3af",
-        cursor: "pointer",
-        fontSize: "16px",
-        padding: "0",
-        lineHeight: "1"
-    })), []), metricRowStyle = React.useMemo((() => ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        marginBottom: "6px"
-    })), []), labelStyle = React.useMemo((() => ({
-        color: "#9ca3af",
-        marginRight: "12px"
-    })), []), valueStyle = React.useMemo((() => ({
-        fontWeight: "bold"
-    })), []);
-    // Get quality level badge color
-        return isVisible ? jsxRuntime.jsxs("div", {
-        style: dashboardStyle,
+ * Displays FPS, frame time, quality level, GPU memory, and auto-scaling status.
+ * Rendered only when `debugPerformance={true}` on the parent `AtomixGlass`.
+ */ const PerformanceDashboard =  React.memo((({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
+    if (!isVisible) return null;
+    const fpsColor = (fps = metrics.fps) >= 58 ? "var(--atomix-color-success, #4ade80)" : fps >= 45 ? "var(--atomix-color-warning, #fbbf24)" : "var(--atomix-color-danger, #ef4444)";
+    var fps;
+    const isCritical = metrics.fps < 45;
+    return jsxRuntime.jsxs("div", {
+        className: "c-perf-dashboard u-position-fixed u-top-4 u-end-4 u-p-3 u-px-4 u-text-xs u-font-mono u-text-white u-rounded-md u-border u-border-white-alpha-10 u-shadow-lg",
+        style: {
+            zIndex: 9999,
+            minWidth: "12.5rem",
+            // 200px
+            backgroundColor: "rgba(17, 24, 39, 0.95)",
+            backdropFilter: "blur(8px)",
+            transition: "opacity 0.3s ease"
+        },
         children: [ jsxRuntime.jsxs("div", {
-            style: headerStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-2 u-pb-2 u-border-b u-border-white-alpha-10",
             children: [ jsxRuntime.jsx("span", {
-                style: titleStyle,
+                className: "u-text-sm u-font-bold u-text-white",
                 children: "Performance Monitor"
             }), onClose && jsxRuntime.jsx("button", {
-                style: closeButtonStyle,
+                className: "u-bg-transparent u-border-none u-p-0 u-line-height-1 u-text-base u-text-gray-400 u-cursor-pointer hover:u-text-white",
                 onClick: onClose,
                 "aria-label": "Close performance dashboard",
+                style: {
+                    transition: "color 0.2s ease"
+                },
                 children: "×"
             }) ]
         }), jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "FPS"
             }), jsxRuntime.jsx("span", {
+                className: "u-font-bold",
                 style: {
-                    ...valueStyle,
-                    color: getFpsColor(metrics.fps)
+                    color: fpsColor
                 },
                 children: Math.round(metrics.fps)
             }) ]
         }), jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "Frame Time"
             }), jsxRuntime.jsxs("span", {
-                style: valueStyle,
+                className: "u-font-bold",
                 children: [ metrics.frameTime.toFixed(2), "ms" ]
             }) ]
         }), jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "Quality"
             }), jsxRuntime.jsx("span", {
+                className: "u-font-bold u-text-uppercase",
                 style: {
-                    ...valueStyle,
-                    color: (quality => {
-                        switch (quality) {
-                          case "high":
-                            return "#4ade80";
-
-                          case "medium":
-                            return "#fbbf24";
-
-                          case "low":
-                            return "#ef4444";
-
-                          default:
-                            return "#9ca3af";
-                        }
-                    })(metrics.qualityLevel),
-                    textTransform: "uppercase",
-                    fontSize: "11px"
+                    fontSize: "0.6875rem",
+                    // 11px
+                    color: getQualityColor(metrics.qualityLevel)
                 },
                 children: metrics.qualityLevel
             }) ]
         }), metrics.gpuMemory && jsxRuntime.jsxs("div", {
-            style: metricRowStyle,
+            className: "u-flex u-items-center u-justify-between u-mb-1-5",
             children: [ jsxRuntime.jsx("span", {
-                style: labelStyle,
+                className: "u-text-gray-400 u-me-3",
                 children: "GPU Memory"
             }), jsxRuntime.jsxs("span", {
-                style: valueStyle,
+                className: "u-font-bold",
                 children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
             }) ]
         }), metrics.isAutoScaling && jsxRuntime.jsx("div", {
+            className: "u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10 u-text-center",
             style: {
-                marginTop: "8px",
-                paddingTop: "8px",
-                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-                fontSize: "10px",
-                color: "#6b7280",
-                textAlign: "center"
+                fontSize: "0.625rem",
+                // 10px
+                color: "#6b7280"
             },
             children: "Auto-scaling active"
         }), jsxRuntime.jsxs("div", {
-            style: {
-                marginTop: "8px",
-                paddingTop: "8px",
-                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-                display: "flex",
-                alignItems: "center",
-                gap: "6px"
-            },
+            className: "u-flex u-items-center u-gap-2 u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10",
             children: [ jsxRuntime.jsx("div", {
+                className: "u-rounded-full",
                 style: {
-                    width: "8px",
-                    height: "8px",
-                    borderRadius: "50%",
-                    backgroundColor: getFpsColor(metrics.fps),
-                    animation: metrics.fps < 45 ? "pulse 1s infinite" : "none"
+                    width: "0.5rem",
+                    height: "0.5rem",
+                    flexShrink: 0,
+                    backgroundColor: fpsColor,
+                    ...isCritical && {
+                        animation: "perf-dashboard-pulse 1s infinite"
+                    }
                 }
             }), jsxRuntime.jsx("span", {
+                className: "u-text-xs",
                 style: {
-                    fontSize: "10px",
-                    color: metrics.fps >= 58 ? "#4ade80" : metrics.fps >= 45 ? "#fbbf24" : "#ef4444"
+                    fontSize: "0.625rem",
+                    // 10px
+                    color: fpsColor
                 },
-                children: metrics.fps >= 58 ? "Optimal" : metrics.fps >= 45 ? "Warning" : "Critical"
+                children: getFpsLabel(metrics.fps)
             }) ]
         }) ]
-    }) : null;
-};
+    });
+}));
 
-// Add pulse animation for critical FPS
-if ("undefined" != typeof document) {
-    const styleSheet = document.createElement("style");
-    styleSheet.textContent = "\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  ", 
-    document.head.appendChild(styleSheet);
-}
+PerformanceDashboard.displayName = "PerformanceDashboard";
 
 /**
  * Mobile optimization presets
@@ -3950,7 +3919,8 @@ if ("undefined" != typeof document) {
 /**
  * Performance preset - Maximum FPS, reduced quality
  * Best for low-end devices or when battery saving is priority
- */ const PERFORMANCE_PRESET = {
+ */
+const PERFORMANCE_PRESET = {
     distortionOctaves: 2,
     // Minimal FBM layers
     displacementScale: 50,
@@ -4113,90 +4083,21 @@ function getDevicePreset(presetName) {
     getPixelRatio: () => "undefined" == typeof window ? 1 : window.devicePixelRatio || 1,
     /** Check if device has touch support */
     hasTouchSupport: () => "undefined" != typeof window && ("ontouchstart" in window || navigator.maxTouchPoints > 0)
-};
-
-/**
- * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
- *
- * Features:
- * - Hardware-accelerated glass effects with SVG filters
- * - Mouse-responsive liquid distortion
- * - Dynamic border-radius extraction from children CSS properties
- * - Automatic light/dark theme detection via overLight prop
- * - Accessibility and performance optimizations
- * - Multiple displacement modes (standard, polar, prominent, shader)
- * - Design token integration for consistent theming
- * - Focus ring support for keyboard navigation
- * - Responsive breakpoints for mobile optimization
- * - Enhanced ARIA attributes for screen readers
- * - Time-based animation system with FBM distortion
- * - Device preset optimization for performance/quality balance
- *
- * Design System Compliance:
- * - Uses design tokens for opacity, spacing, and colors
- * - Follows BEM methodology for class naming
- * - Implements focus-ring mixin for accessibility
- * - Supports reduced motion and high contrast preferences
- *
- * @example
- * // Basic usage with dynamic border-radius extraction
- * <AtomixGlass>
- *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Manual border-radius override
- * <AtomixGlass borderRadius={20}>
- *   <div>Content with 20px glass radius</div>
- * </AtomixGlass>
- *
- * @example
- * // Interactive glass with click handler
- * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
- *   <div>Clickable content</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Boolean mode (explicit control)
- * <AtomixGlass overLight={true}>
- *   <div>Content on light background</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Auto-detection mode
- * <AtomixGlass overLight="auto">
- *   <div>Content with auto-detected background</div>
- * </AtomixGlass>
- *
- * @example
- * // OverLight - Object config with custom settings
- * <AtomixGlass
- *   overLight={{
- *     threshold: 0.8,
- *     opacity: 0.6,
- *     contrast: 1.8,
- *     brightness: 1.0,
- *     saturationBoost: 1.5
- *   }}
- * >
- *   <div>Content with custom overLight config</div>
- * </AtomixGlass>
- *
- * @example
- * // Debug mode for overLight detection
- * <AtomixGlass overLight="auto" debugOverLight={true}>
- *   <div>Content with debug logging enabled</div>
- * </AtomixGlass>
- *
- * @example
- * // Performance-optimized for mobile devices
- * <AtomixGlass devicePreset="performance" disableResponsiveBreakpoints={false}>
- *   <div>Mobile-optimized glass effect</div>
- * </AtomixGlass>
- */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, ...rest}) {
-    const glassRef = React.useRef(null), contentRef = React.useRef(null), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, applyTimeBasedDistortion: applyTimeBasedDistortion, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+}, AtomixGlassInner =  React.forwardRef((function({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, isFixedOrSticky: propsIsFixedOrSticky, ...rest}, ref) {
+    const glassRef = React.useRef(null), contentRef = React.useRef(null), internalWrapperRef = React.useRef(null), mergedRef = React.useMemo((() => 
+    // Helper to merge refs
+    function(...refs) {
+        return node => {
+            refs.forEach((ref => {
+                "function" == typeof ref ? ref(node) : null != ref && (ref.current = node);
+            }));
+        };
+    }
+    // Internal implementation with forwardRef
+    (ref, internalWrapperRef)), [ ref ]), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = propsIsFixedOrSticky || "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
+        wrapperRef: internalWrapperRef,
         borderRadius: borderRadius,
         globalMousePosition: externalGlobalMousePosition,
         mouseOffset: externalMouseOffset,
@@ -4225,7 +4126,6 @@ function getDevicePreset(presetName) {
         distortionGain: distortionGain,
         distortionQuality: distortionQuality
     });
-    // Re-calculate only when devicePreset changes
     // Responsive breakpoint system - automatically adjusts parameters based on viewport
     useResponsiveGlass({
         baseParams: {
@@ -4240,22 +4140,21 @@ function getDevicePreset(presetName) {
         },
         breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
         enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
-        // Enable unless disabled
         debug: !1
     });
     // Performance monitoring - tracks FPS, frame time, memory usage
-    const {metrics: performanceMetrics, recommendedQuality: recommendedQuality, isUnderperforming: isUnderperforming, setQualityLevel: setQualityLevel, toggleMonitoring: toggleMonitoring} = usePerformanceMonitor({
-        enabled: !1,
-        // We'll toggle manually based on prop
+    const {metrics: performanceMetrics, toggleMonitoring: toggleMonitoring} = usePerformanceMonitor({
+        enabled: debugPerformance,
+        // Enable when debugPerformance is true
         debug: !1,
         showOverlay: !1
     });
-    // Auto-start performance monitoring if enabled (only in development)
+    // Auto-start performance monitoring when debugPerformance is enabled
         React__default.default.useEffect((() => {
-        "development" === process.env.NODE_ENV && window?.enablePerformanceMonitoring && toggleMonitoring();
+        debugPerformance && toggleMonitoring();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        }), []);
-    // Only run once on mount
+        }), [ debugPerformance ]);
+    // Re-run when debugPerformance changes
     const isOverLight = React.useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = React.useMemo((() => {
         if (!isFixedOrSticky) return {};
         const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
@@ -4283,34 +4182,30 @@ function getDevicePreset(presetName) {
         if (isFixedOrSticky) {
             const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
             return {
-                ...visualStyle,
-                ...!effectiveWithoutEffects && {
-                    transform: transformStyle
-                }
+                ...visualStyle
             };
         }
         return {
-            ...restStyle,
-            ...!effectiveWithoutEffects && {
-                transform: transformStyle
-            }
+            ...restStyle
         };
-    }), [ isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle ]);
+    }), [ isFixedOrSticky, restStyle ]);
     // Build className with state modifiers
     const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = React.useMemo((() => ({
         position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
-        top: isFixedOrSticky ? 0 : restStyle.top || 0,
-        left: isFixedOrSticky ? 0 : restStyle.left || 0
-    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left ]), adjustedSize = React.useMemo((() => {
+        top: isFixedOrSticky ? restStyle.top ?? 0 : 0,
+        left: isFixedOrSticky ? restStyle.left ?? 0 : 0,
+        right: isFixedOrSticky ? restStyle.right ?? "auto" : "auto",
+        bottom: isFixedOrSticky ? restStyle.bottom ?? "auto" : "auto"
+    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left, restStyle.right, restStyle.bottom ]), adjustedSize = React.useMemo((() => {
         // Keep a reference to positionStyles to avoid unused-variable lint,
         // but sizing is driven by explicit width/height or measured size.
         positionStyles.position;
-        const resolveLength = (value, measured) => void 0 !== value ? "number" == typeof value ? `${value}px` : value : measured > 0 ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
+        const resolveLength = (value, measured) => void 0 !== value && isFixedOrSticky ? "number" == typeof value ? `${value}px` : value : measured > 0 && isFixedOrSticky ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
         return {
             width: resolveLength(effectiveWidth, glassSize.width),
             height: resolveLength(effectiveHeight, glassSize.height)
         };
-    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = React.useMemo((() => {
+    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height, isFixedOrSticky ]), 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,
@@ -4340,33 +4235,32 @@ function getDevicePreset(presetName) {
             absMx: absMx,
             absMy: absMy
         };
-    }), [ mouseOffset.x, mouseOffset.y ]), opacityValues = React.useMemo((() => {
-        const overLightOpacity = overLightConfig.opacity;
-        return {
-            hover1: isHovered || isActive ? .5 : 0,
-            hover2: isActive ? .5 : 0,
-            hover3: isHovered ? .4 : isActive ? .8 : 0,
-            base: isOverLight ? overLightOpacity || .4 : 0,
-            over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
-        };
-    }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = React.useMemo((() => {
-        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
+    }), [ mouseOffset.x, mouseOffset.y ]), clampedOverLightOpacity = Math.max(0, Math.min(1, overLightConfig?.opacity ?? .4)), clampedBorderOpacity = Math.max(0, Math.min(1, overLightConfig?.borderOpacity ?? 1)), opacityValues = React.useMemo((() => ({
+        hover1: isHovered || isActive ? .5 : 0,
+        hover2: isActive ? .5 : 0,
+        hover3: isHovered ? .4 : isActive ? .8 : 0,
+        base: isOverLight ? clampedOverLightOpacity || .4 : 0,
+        over: isOverLight ? 1.1 * (clampedOverLightOpacity || .4) : 0
+    })), [ isHovered, isActive, isOverLight, clampedOverLightOpacity ]), glassVars = React.useMemo((() => {
+        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
         return {
             ...void 0 !== customZIndex && {
                 "--atomix-glass-base-z-index": customZIndex
             },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
-            // Internal decorative layers are positioned relative to the root;
-            "--atomix-glass-position": rootLayoutStyle.position,
-            "--atomix-glass-top": `${isFixedOrSticky ? rootLayoutStyle.top : 0}px`,
-            "--atomix-glass-left": `${isFixedOrSticky ? rootLayoutStyle.left : 0}px`,
+            "--atomix-glass-container-position": `${isFixedOrSticky ? rootLayoutStyle.position : positionStyles.position}`,
+            "--atomix-glass-position": `${isFixedOrSticky ? rootLayoutStyle.position : positionStyles.position}`,
+            "--atomix-glass-top": `${isFixedOrSticky ? restStyle.top ?? 0 : 0}px`,
+            "--atomix-glass-left": `${isFixedOrSticky ? restStyle.left ?? 0 : 0}px`,
+            "--atomix-glass-right": isFixedOrSticky ? restStyle.right ?? "auto" : "auto",
+            "--atomix-glass-bottom": isFixedOrSticky ? restStyle.bottom ?? "auto" : "auto",
             "--atomix-glass-width": adjustedSize.width,
             "--atomix-glass-height": adjustedSize.height,
-            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
+            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.125rem)",
             "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
-            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * clampedBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * clampedBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
             "--atomix-glass-hover-1-opacity": opacityValues.hover1,
             "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
             "--atomix-glass-hover-2-opacity": opacityValues.hover2,
@@ -4380,13 +4274,14 @@ function getDevicePreset(presetName) {
             "--atomix-glass-overlay-highlight-opacity": opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
             "--atomix-glass-overlay-highlight-bg": `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
         };
-    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, overLightConfig.borderOpacity, customZIndex, rootLayoutStyle, isFixedOrSticky ]), renderBackgroundLayer = layerType => jsxRuntime.jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, clampedBorderOpacity, customZIndex, isFixedOrSticky, positionStyles.position, rootLayoutStyle.position, restStyle.top, restStyle.left, restStyle.right, restStyle.bottom ]), 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(" ")
     });
     // Calculate position and size styles for internal layers
     // When root is fixed/sticky, internal layers use absolute (relative to root)
         return jsxRuntime.jsxs("div", {
         ...rest,
+        ref: mergedRef,
         className: componentClassName,
         style: {
             ...glassVars
@@ -4396,17 +4291,14 @@ function getDevicePreset(presetName) {
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
-        "aria-pressed": !(!onClick || !isActive) || !onClick && void 0,
+        "aria-pressed": void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsxRuntime.jsx(AtomixGlassContainer, {
             ref: glassRef,
             contentRef: contentRef,
             className: className,
             style: {
-                ...restStyle,
-                ...!isFixedOrSticky && {
-                    position: "relative"
-                }
+                ...restStyle
             },
             borderRadius: effectiveBorderRadius,
             displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
@@ -4442,6 +4334,7 @@ function getDevicePreset(presetName) {
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
+            isFixedOrSticky: isFixedOrSticky,
             // Phase 1: Animation System props
             shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
@@ -4470,6 +4363,8 @@ function getDevicePreset(presetName) {
             }) ]
         }), withBorder && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("span", {
+                className: ATOMIX_GLASS.BORDER_BACKDROP_CLASS
+            }), jsxRuntime.jsx("span", {
                 className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsxRuntime.jsx("span", {
                 className: ATOMIX_GLASS.BORDER_2_CLASS
@@ -4480,10 +4375,15 @@ function getDevicePreset(presetName) {
             onClose: () => {}
         }) ]
     });
-}
+}));
 
-// Default icon
-const DefaultIcon = () => jsxRuntime.jsx("i", {
+AtomixGlassInner.displayName = "AtomixGlass";
+
+/**
+ * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
+ * Ref is forwarded to the root `<div>` element.
+ */
+const AtomixGlass =  React.memo(AtomixGlassInner), DefaultIcon = () => jsxRuntime.jsx("i", {
     className: "c-accordion__icon",
     "aria-hidden": "true",
     children: jsxRuntime.jsx("svg", {
@@ -4517,6 +4417,7 @@ const DefaultIcon = () => jsxRuntime.jsx("i", {
     });
 }));
 
+// Default icon
 AccordionHeader.displayName = "AccordionHeader";
 
 const AccordionBody =  React.forwardRef((({children: children, className: className = "", panelRef: panelRef, contentRef: contentRef, ...props}, ref) => {
@@ -5443,7 +5344,100 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, ...props}, ref) => {
+var aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, lengthOfArrayLike = lengthOfArrayLike$2, $TypeError = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod = function(IS_RIGHT) {
+    return function(that, callbackfn, argumentsLength, memo) {
+        var O = toObject(that), self = IndexedObject(O), length = lengthOfArrayLike(O);
+        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
+        var index = IS_RIGHT ? length - 1 : 0, i = IS_RIGHT ? -1 : 1;
+        if (argumentsLength < 2) for (;;) {
+            if (index in self) {
+                memo = self[index], index += i;
+                break;
+            }
+            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError(REDUCE_EMPTY);
+        }
+        for (;IS_RIGHT ? index >= 0 : length > index; index += i) index in self && (memo = callbackfn(memo, self[index], index, O));
+        return memo;
+    };
+}, arrayReduce = {
+    // `Array.prototype.reduce` method
+    // https://tc39.es/ecma262/#sec-array.prototype.reduce
+    left: createMethod(!1),
+    // `Array.prototype.reduceRight` method
+    // https://tc39.es/ecma262/#sec-array.prototype.reduceright
+    right: createMethod(!0)
+}, fails = fails$9, globalThis$1 = globalThis_1, userAgent = environmentUserAgent, classof = classofRaw$2, userAgentStartsWith = function(string) {
+    return userAgent.slice(0, string.length) === string;
+}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$1.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$1.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof(globalThis$1.process) ? "NODE" : globalThis$1.window && globalThis$1.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
+
+// `Array.prototype.reduce` method
+// https://tc39.es/ecma262/#sec-array.prototype.reduce
+_export({
+    target: "Array",
+    proto: !0,
+    forced: !("NODE" === environment) && environmentV8Version > 79 && environmentV8Version < 83 || !function(METHOD_NAME, argument) {
+        var method = [][METHOD_NAME];
+        return !!method && fails((function() {
+            // eslint-disable-next-line no-useless-call -- required for testing
+            method.call(null, argument || function() {
+                return 1;
+            }, 1);
+        }));
+    }("reduce")
+}, {
+    reduce: function(callbackfn /* , initialValue */) {
+        var length = arguments.length;
+        return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var reduce$3 = getBuiltInPrototypeMethod$3("Array", "reduce"), isPrototypeOf = objectIsPrototypeOf, method = reduce$3, ArrayPrototype = Array.prototype, _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.reduce;
+    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.reduce ? method : own;
+}));
+
+/**
+ * Render a slot with the given props
+ *
+ * Priority order:
+ * 1. render function
+ * 2. component
+ * 3. children
+ * 4. fallback
+ *
+ * @example
+ * renderSlot(
+ *   { render: (props) => <CustomButton {...props} /> },
+ *   { onClick: handleClick, children: 'Click me' }
+ * )
+ */
+function renderSlot(slot, props, fallback) {
+    // No slot provided, use fallback
+    if (!slot) return fallback;
+    // Slot is a plain React node
+        if ( React__default.default.isValidElement(slot) || "string" == typeof slot || "number" == typeof slot) return slot;
+    // Slot is an object with rendering options
+        if ("object" == typeof slot && null !== slot) {
+        const slotObj = slot;
+        // Priority 1: render function
+                if (slotObj.render && "function" == typeof slotObj.render) return slotObj.render(props);
+        // Priority 2: component
+                if (slotObj.component) {
+            const Component = slotObj.component;
+            return jsxRuntime.jsx(Component, {
+                ...props
+            });
+        }
+        // Priority 3: children
+                if (void 0 !== slotObj.children) return slotObj.children;
+    }
+    // Fallback
+        return fallback;
+}
+
+/**
+ * Check if a value is a slot configuration
+ */ const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, slots: slots, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href), iconElement = iconName ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -5459,17 +5453,28 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
         children: [ loading && jsxRuntime.jsx("span", {
             className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT),
             "aria-hidden": "true",
-            children: jsxRuntime.jsx(Spinner, {
+            children: renderSlot(slots?.spinner, {
+                className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT),
                 size: spinnerSize,
                 variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
-            })
+            }, jsxRuntime.jsx(Spinner, {
+                size: spinnerSize,
+                variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
+            }))
         }), iconElement && !loading && jsxRuntime.jsx("span", {
             className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT),
             "aria-hidden": "true",
-            children: iconElement
+            children: renderSlot(slots?.icon, {
+                className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT),
+                children: iconElement,
+                size: iconSize
+            }, iconElement)
         }), !iconOnly && buttonText && jsxRuntime.jsx("span", {
             className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT),
-            children: buttonText
+            children: renderSlot(slots?.label, {
+                className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT),
+                children: buttonText
+            }, buttonText)
         }) ]
     }), buttonProps = {
         className: buttonClass,
@@ -5486,48 +5491,59 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
         tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
         style: style,
         ...props
-    };
-    // 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 = {
+    }, buttonChildren = renderSlot(slots?.root, {
+        className: buttonClass,
+        children: buttonContent,
+        disabled: isDisabled,
+        loading: loading,
+        onClick: handleClickEvent,
+        type: type,
+        "aria-label": safeAriaLabel,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading
+    }, (() => {
+        // 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: isDisabled ? void 0 : href,
+                    to: isDisabled ? void 0 : href,
+                    target: target,
+                    rel: "_blank" === target ? "noopener noreferrer" : void 0
+                };
+                return jsxRuntime.jsx(LinkComp, {
+                    ...linkProps,
+                    children: buttonContent
+                });
+            }
+            // Fallback to regular anchor tag
+            return jsxRuntime.jsx("a", {
+                ...buttonProps,
+                ref: ref,
+                href: isDisabled ? void 0 : href,
+                target: target,
+                rel: "_blank" === target ? "noopener noreferrer" : void 0,
+                children: buttonContent
+            });
+        }
+        // Default button rendering
+        return jsxRuntime.jsx(Component, {
             ...buttonProps,
             ref: ref,
-            // linkComponent usually forwards ref to anchor
-            href: isDisabled ? void 0 : href,
-            to: isDisabled ? void 0 : href,
-            target: target,
-            rel: "_blank" === target ? "noopener noreferrer" : void 0
-        };
-        content = jsxRuntime.jsx(LinkComp, {
-            ...linkProps,
+            type: "button" === Component ? type : void 0,
+            disabled: isDisabled,
             children: buttonContent
         });
-    } else 
-    // Fallback to regular anchor tag
-    content = jsxRuntime.jsx("a", {
-        ...buttonProps,
-        ref: ref,
-        href: isDisabled ? void 0 : href,
-        target: target,
-        rel: "_blank" === target ? "noopener noreferrer" : void 0,
-        children: buttonContent
-    }); else 
-    // Default button rendering
-    content = jsxRuntime.jsx(Component, {
-        ...buttonProps,
-        ref: ref,
-        type: "button" === Component ? type : void 0,
-        disabled: isDisabled,
-        children: buttonContent
-    });
-    if (glass) {
+    })());
+    // 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.
+        if (glass) {
         // Default glass props
         const defaultGlassProps = {
             displacementScale: 20,
@@ -5540,10 +5556,10 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
         };
         return jsxRuntime.jsx(AtomixGlass, {
             ...glassProps,
-            children: content
+            children: buttonChildren
         });
     }
-    return content;
+    return buttonChildren;
 })));
 
 Button.displayName = "Button";
@@ -5651,7 +5667,7 @@ const CalloutContent =  React.forwardRef((({children: children, className: class
 
 CalloutContent.displayName = "CalloutContent";
 
-const Callout =  React.memo((({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, compact: compact = !1, isToast: isToast = !1, glass: glass, className: className, style: style, ...props}) => {
+const CalloutComponentBase = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, compact: compact = !1, isToast: isToast = !1, glass: glass, className: className, style: style, ...props}) => {
     const {generateCalloutClass: generateCalloutClass, handleClose: handleClose} = 
     /**
  * Callout state and functionality
@@ -5777,7 +5793,7 @@ const Callout =  React.memo((({title: title, children: children, icon: icon, var
         style: style,
         children: calloutContent
     });
-}));
+}, Callout =  React.memo(CalloutComponentBase);
 
 Callout.displayName = "Callout", 
 // Attach subcomponents
@@ -6067,60 +6083,6 @@ const ElevationCard = ({elevationClass: elevationClass = "is-elevated", classNam
     });
 };
 
-ElevationCard.displayName = "ElevationCard";
-
-var aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, lengthOfArrayLike = lengthOfArrayLike$2, $TypeError = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod = function(IS_RIGHT) {
-    return function(that, callbackfn, argumentsLength, memo) {
-        var O = toObject(that), self = IndexedObject(O), length = lengthOfArrayLike(O);
-        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
-        var index = IS_RIGHT ? length - 1 : 0, i = IS_RIGHT ? -1 : 1;
-        if (argumentsLength < 2) for (;;) {
-            if (index in self) {
-                memo = self[index], index += i;
-                break;
-            }
-            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError(REDUCE_EMPTY);
-        }
-        for (;IS_RIGHT ? index >= 0 : length > index; index += i) index in self && (memo = callbackfn(memo, self[index], index, O));
-        return memo;
-    };
-}, arrayReduce = {
-    // `Array.prototype.reduce` method
-    // https://tc39.es/ecma262/#sec-array.prototype.reduce
-    left: createMethod(!1),
-    // `Array.prototype.reduceRight` method
-    // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-    right: createMethod(!0)
-}, fails = fails$9, globalThis$1 = globalThis_1, userAgent = environmentUserAgent, classof = classofRaw$2, userAgentStartsWith = function(string) {
-    return userAgent.slice(0, string.length) === string;
-}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$1.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$1.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof(globalThis$1.process) ? "NODE" : globalThis$1.window && globalThis$1.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
-
-// `Array.prototype.reduce` method
-// https://tc39.es/ecma262/#sec-array.prototype.reduce
-_export({
-    target: "Array",
-    proto: !0,
-    forced: !("NODE" === environment) && environmentV8Version > 79 && environmentV8Version < 83 || !function(METHOD_NAME, argument) {
-        var method = [][METHOD_NAME];
-        return !!method && fails((function() {
-            // eslint-disable-next-line no-useless-call -- required for testing
-            method.call(null, argument || function() {
-                return 1;
-            }, 1);
-        }));
-    }("reduce")
-}, {
-    reduce: function(callbackfn /* , initialValue */) {
-        var length = arguments.length;
-        return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : void 0);
-    }
-});
-
-var reduce$3 = getBuiltInPrototypeMethod$3("Array", "reduce"), isPrototypeOf = objectIsPrototypeOf, method = reduce$3, ArrayPrototype = Array.prototype, _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
-    var own = it.reduce;
-    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.reduce ? method : own;
-}));
-
 /**
  * Comprehensive chart hook with shared functionality
  * @param initialProps - Initial chart properties
@@ -6158,8 +6120,11 @@ function useChart(initialProps) {
     }), animationFrameRef = React.useRef(null);
     // Default chart properties
         // Cleanup animation frame on unmount
-    React.useEffect((() => () => {
-        animationFrameRef.current && cancelAnimationFrame(animationFrameRef.current);
+    React.useEffect((() => {
+        const currentRef = animationFrameRef.current;
+        return () => {
+            currentRef && cancelAnimationFrame(currentRef);
+        };
     }), []);
     /**
    * Point interaction handlers
@@ -6550,7 +6515,9 @@ function getDatasetBounds(data) {
 
 /**
  * Hook for managing chart toolbar state and generating chart-specific configurations
- */ const ChartToolbar =  React.memo( React.forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
+ */ ElevationCard.displayName = "ElevationCard";
+
+const ChartToolbar =  React.memo( React.forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
     refresh: !0,
     export: !0,
     fullscreen: !0,
@@ -7040,8 +7007,8 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         }), [ chartType ]), finalDefaults = React.useMemo((() => ({
             ...getChartDefaults(),
             ...defaults
-        })), [ getChartDefaults, defaults ]), enhancedHandlers = {
-            onRefresh: React.useCallback((() => {
+        })), [ getChartDefaults, defaults ]), enhancedHandlers = React.useMemo((() => ({
+            onRefresh: () => {
                 setState((prev => ({
                     ...prev,
                     isRefreshing: !0
@@ -7051,8 +7018,8 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
                         isRefreshing: !1
                     })));
                 }), 1e3);
-            }), [ handlers.onRefresh ]),
-            onExport: React.useCallback((async format => {
+            },
+            onExport: async format => {
                 setState((prev => ({
                     ...prev,
                     isExporting: !0
@@ -7065,70 +7032,70 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
                         isExporting: !1
                     })));
                 }
-            }), [ handlers.onExport ]),
-            onFullscreen: React.useCallback((isFullscreen => {
+            },
+            onFullscreen: isFullscreen => {
                 setState((prev => ({
                     ...prev,
                     isFullscreen: isFullscreen
                 }))), handlers.onFullscreen?.(isFullscreen);
-            }), [ handlers.onFullscreen ]),
-            onZoomIn: React.useCallback((() => {
+            },
+            onZoomIn: () => {
                 setState((prev => ({
                     ...prev,
                     zoomLevel: Math.min(1.2 * prev.zoomLevel, 5)
                 }))), handlers.onZoomIn?.();
-            }), [ handlers.onZoomIn ]),
-            onZoomOut: React.useCallback((() => {
+            },
+            onZoomOut: () => {
                 setState((prev => ({
                     ...prev,
                     zoomLevel: Math.max(prev.zoomLevel / 1.2, .2)
                 }))), handlers.onZoomOut?.();
-            }), [ handlers.onZoomOut ]),
-            onZoomReset: React.useCallback((() => {
+            },
+            onZoomReset: () => {
                 setState((prev => ({
                     ...prev,
                     zoomLevel: 1
                 }))), handlers.onZoomReset?.();
-            }), [ handlers.onZoomReset ]),
-            onPanToggle: React.useCallback((enabled => {
+            },
+            onPanToggle: enabled => {
                 setState((prev => ({
                     ...prev,
                     panEnabled: enabled
                 }))), handlers.onPanToggle?.(enabled);
-            }), [ handlers.onPanToggle ]),
-            onReset: React.useCallback((() => {
+            },
+            onReset: () => {
                 setState((prev => ({
                     ...prev,
                     zoomLevel: 1,
                     panEnabled: !1
                 }))), handlers.onReset?.();
-            }), [ handlers.onReset ]),
-            onGridToggle: React.useCallback((show => {
+            },
+            onGridToggle: show => {
                 setState((prev => ({
                     ...prev,
                     showGrid: show
                 }))), handlers.onGridToggle?.(show);
-            }), [ handlers.onGridToggle ]),
-            onLegendToggle: React.useCallback((show => {
+            },
+            onLegendToggle: show => {
                 setState((prev => ({
                     ...prev,
                     showLegend: show
                 }))), handlers.onLegendToggle?.(show);
-            }), [ handlers.onLegendToggle ]),
-            onTooltipsToggle: React.useCallback((show => {
+            },
+            onTooltipsToggle: show => {
                 setState((prev => ({
                     ...prev,
                     showTooltips: show
                 }))), handlers.onTooltipsToggle?.(show);
-            }), [ handlers.onTooltipsToggle ]),
-            onAnimationsToggle: React.useCallback((enabled => {
+            },
+            onAnimationsToggle: enabled => {
                 setState((prev => ({
                     ...prev,
                     animationsEnabled: enabled
                 }))), handlers.onAnimationsToggle?.(enabled);
-            }), [ handlers.onAnimationsToggle ]),
-            onSettings: React.useCallback((() => {}), [])
-        }, generateToolbarGroups = React.useCallback((() => {
+            },
+            onSettings: () => {}
+        })), [ handlers ]), generateToolbarGroups = React.useCallback((() => {
             const groups = [], dataActions = [];
             // Data actions group
                         finalDefaults.refresh && dataActions.push({
@@ -7253,7 +7220,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
                 actions: customActions
             });
             return groups;
-        }), [ chartType, finalDefaults, state, enhancedHandlers, customActions, customGroups ]);
+        }), [ finalDefaults, state, enhancedHandlers, customActions, customGroups ]);
         // Keyboard shortcuts
         return React.useEffect((() => {
             const handleKeyDown = event => {
@@ -7845,7 +7812,7 @@ const ChartRenderer =  React.memo( React.forwardRef((({datasets: datasets = [],
         announcement: announcement,
         focusedPoint: focusedPoint,
         getAccessibleDescription: () => "Chart description"
-    })), [ announcement, focusedPoint ]), transform = React.useMemo((() => chartContext ? `translate(${chartContext.panOffset.x}px, ${chartContext.panOffset.y}px) scale(${chartContext.zoomLevel})` : ""), [ chartContext?.panOffset.x, chartContext?.panOffset.y, chartContext?.zoomLevel ]), chartData = React.useMemo((() => {
+    })), [ announcement, focusedPoint ]), transform = React.useMemo((() => chartContext ? `translate(${chartContext.panOffset.x}px, ${chartContext.panOffset.y}px) scale(${chartContext.zoomLevel})` : ""), [ chartContext ]), chartData = React.useMemo((() => {
         // Return null if dimensions not ready to prevent calculation with invalid dimensions
         if (!isInitialized || 0 === dimensions.width || 0 === dimensions.height) return null;
         const scales = calculateScales(processedData, dimensions.width, dimensions.height, void 0, config);
@@ -8258,7 +8225,7 @@ function useBarChart(datasets, options = {}) {
                 opacity: .4
             } ]
         };
-    })) : []), [ options.useGradients ]), formatValue = React.useCallback((value => options.valueFormatter ? options.valueFormatter(value) : value.toString()), [ options.valueFormatter ]);
+    })) : []), [ options.useGradients ]), formatValue = React.useCallback((value => options.valueFormatter ? options.valueFormatter(value) : value.toString()), [ options ]);
     return {
         // State
         hoveredBar: hoveredBar,
@@ -8284,7 +8251,7 @@ function useBarChart(datasets, options = {}) {
                     y: horizontal ? y + height / 2 : y - 5
                 };
             }
-        }), [ options.dataLabelPosition ]),
+        }), [ options ]),
         // Handlers
         handleBarHover: handleBarHover,
         handleBarLeave: handleBarLeave,
@@ -8594,13 +8561,13 @@ const DonutChart =  React.memo( React.forwardRef((({datasets: datasets = [], con
     roundedCorners: !0
 }, onDataPointClick: onDataPointClick, ...props}, ref) => {
     // Use the first dataset for donut chart
-    const dataset = datasets.length > 0 ? datasets[0] : {
+    const dataset = React.useMemo((() => datasets.length > 0 ? datasets[0] : {
         label: "",
         data: []
-    }, chartData = React.useMemo((() => {
+    }), [ datasets ]), chartData = React.useMemo((() => {
         if (!dataset?.data?.length) return null;
         // Filter out invalid data points
-                const validDataPoints = dataset?.data?.filter((point => "number" == typeof point.value && !isNaN(point.value) && isFinite(point.value) && point.value > 0));
+                const validDataPoints = (dataset?.data || []).filter((point => "number" == typeof point.value && !isNaN(point.value) && isFinite(point.value) && point.value > 0));
         return validDataPoints.length ? {
             validDataPoints: validDataPoints
         } : null;
@@ -9559,7 +9526,7 @@ function usePieChart(data, options = {}) {
         const parts = [];
         return !1 !== options.showLabels && parts.push(slice.label), options.showPercentages && parts.push(`${Math.round(slice.percentage)}%`), 
         options.showValues && parts.push(slice.value.toString()), parts.join(" - ");
-    }), [ options.labelFormatter, options.showLabels, options.showPercentages, options.showValues ]), getSliceTransform = React.useCallback(((slice, isHovered) => isHovered && options.enableHoverEffects && options.hoverOffset ? `translate(${Math.cos(slice.midAngle) * options.hoverOffset}, ${Math.sin(slice.midAngle) * options.hoverOffset})` : ""), [ options.enableHoverEffects, options.hoverOffset ]), isSliceSelected = React.useCallback((index => selectedSlices.has(index)), [ selectedSlices ]);
+    }), [ options ]), getSliceTransform = React.useCallback(((slice, isHovered) => isHovered && options.enableHoverEffects && options.hoverOffset ? `translate(${Math.cos(slice.midAngle) * options.hoverOffset}, ${Math.sin(slice.midAngle) * options.hoverOffset})` : ""), [ options.enableHoverEffects, options.hoverOffset ]), isSliceSelected = React.useCallback((index => selectedSlices.has(index)), [ selectedSlices ]);
     return {
         // Data
         processedData: processedData,
@@ -10995,7 +10962,7 @@ const DataTable =  React.memo((({data: data, columns: columns, className: classN
             const newOrder = columns.map((col => col.key)), currentOrderSet = new Set(columnOrder), newOrderSet = new Set(newOrder);
             // Only update if there are actual differences
             newOrder.length === columnOrder.length && newOrder.every((key => currentOrderSet.has(key))) && columnOrder.every((key => newOrderSet.has(key))) || setColumnOrder(newOrder);
-        }), [ columns ]), 
+        }), [ columns, columnOrder ]), 
         // Update column visibility when columns prop changes
         React.useEffect((() => {
             setColumnVisibility((prev => {
@@ -11540,7 +11507,7 @@ function formatDate(date, format) {
 /**
  * Check if a date is within a min and max range
  */ function useDatePicker({value: value, onChange: onChange, selectionMode: selectionMode = "single", startDate: startDate, endDate: endDate, onRangeChange: onRangeChange, format: format = "MM/dd/yyyy", minDate: minDate, maxDate: maxDate, inline: inline = !1} = {}) {
-    const [isOpen, setIsOpen] = React.useState(inline), [inputValue, setInputValue] = React.useState(value ? formatDate(value, format) : ""), [rangeInputValue, setRangeInputValue] = React.useState(startDate && endDate ? `${formatDate(startDate, format)} - ${formatDate(endDate, format)}` : startDate ? `${formatDate(startDate, format)} - Select end date` : ""), [viewDate, setViewDate] = React.useState(value || startDate || new Date), [viewMode, setViewMode] = React.useState("days"), [rangeSelectionState, setRangeSelectionState] = React.useState(!startDate || startDate && endDate ? "start" : "end"), datePickerRef = React.useRef(null), inputRef = React.useRef(null), today = new Date, currentMonth = viewDate.getMonth(), currentYear = viewDate.getFullYear(), daysInMonth = getDaysInMonth(currentYear, currentMonth), firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
+    const [isOpen, setIsOpen] = React.useState(inline), [inputValue, setInputValue] = React.useState(value ? formatDate(value, format) : ""), [rangeInputValue, setRangeInputValue] = React.useState(startDate && endDate ? `${formatDate(startDate, format)} - ${formatDate(endDate, format)}` : startDate ? `${formatDate(startDate, format)} - Select end date` : ""), [viewDate, setViewDate] = React.useState(value || startDate || new Date), [viewMode, setViewMode] = React.useState("days"), [rangeSelectionState, setRangeSelectionState] = React.useState(!startDate || startDate && endDate ? "start" : "end"), datePickerRef = React.useRef(null), inputRef = React.useRef(null), today = React.useMemo((() => new Date), []), currentMonth = viewDate.getMonth(), currentYear = viewDate.getFullYear(), daysInMonth = getDaysInMonth(currentYear, currentMonth), firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
     // Update input value when value or range dates change externally
     React.useEffect((() => {
         "single" === selectionMode ? setInputValue(value ? formatDate(value, format) : "") : (setRangeInputValue(startDate && endDate ? `${formatDate(startDate, format)} - ${formatDate(endDate, format)}` : startDate ? `${formatDate(startDate, format)} - Select end date` : ""), 
@@ -12063,21 +12030,11 @@ const DatePicker =  React.forwardRef((({value: value, onChange: onChange, select
  * @returns EdgePanel state and methods
  */
 function useEdgePanel(initialProps) {
-    // Default EdgePanel properties
-    const defaultProps = {
-        position: "start",
-        mode: "slide",
-        isOpen: !1,
-        backdrop: !0,
-        closeOnBackdropClick: !0,
-        closeOnEscape: !0,
-        glass: void 0,
-        ...initialProps
-    }, [isOpen, setIsOpen] = React.useState(defaultProps.isOpen || !1), containerRef = React.useRef(null), backdropRef = React.useRef(null), adjustBodyPadding = React.useCallback((() => {
-        if (!containerRef.current || "push" !== defaultProps.mode) return;
-        const {position: position} = defaultProps, size = "top" === position || "bottom" === position ? containerRef.current.clientHeight : containerRef.current.clientWidth;
+    const {position: position = "start", mode: mode = "slide", isOpen: propIsOpen = !1, backdrop: backdrop = !0, closeOnBackdropClick: closeOnBackdropClick = !0, closeOnEscape: closeOnEscape = !0, glass: glass, onOpenChange: onOpenChange, className: className = ""} = initialProps || {}, [isOpen, setIsOpen] = React.useState(propIsOpen || !1), containerRef = React.useRef(null), backdropRef = React.useRef(null), adjustBodyPadding = React.useCallback((() => {
+        if (!containerRef.current || "push" !== mode) return;
+        const size = "top" === position || "bottom" === position ? containerRef.current.clientHeight : containerRef.current.clientWidth;
         // Map position to CSS padding property
-        let paddingProperty;
+                let paddingProperty;
         switch (position) {
           case "start":
             paddingProperty = "paddingLeft";
@@ -12092,9 +12049,8 @@ function useEdgePanel(initialProps) {
             paddingProperty = `padding${position.charAt(0).toUpperCase() + position.slice(1)}`;
         }
         document.body.style[paddingProperty] = `${size}px`, document.body.classList.add("is-pushed");
-    }), [ defaultProps.mode, defaultProps.position ]), resetBodyPadding = React.useCallback((() => {
-        if ("push" !== defaultProps.mode) return;
-        const {position: position} = defaultProps;
+    }), [ mode, position ]), resetBodyPadding = React.useCallback((() => {
+        if ("push" !== mode) return;
         // Map position to CSS padding property
                 let paddingProperty;
         switch (position) {
@@ -12111,11 +12067,10 @@ function useEdgePanel(initialProps) {
             paddingProperty = `padding${position.charAt(0).toUpperCase() + position.slice(1)}`;
         }
         document.body.style[paddingProperty] = "", document.body.classList.remove("is-pushed");
-    }), [ defaultProps.mode, defaultProps.position ]), openPanel = React.useCallback(((useFadeAnimation = !1) => {
+    }), [ mode, position ]), openPanel = React.useCallback(((useFadeAnimation = !1) => {
         if (setIsOpen(!0), document.body.classList.add("is-edgepanel-open"), containerRef.current) {
-            const {mode: mode} = defaultProps;
             // Only add animation if not in 'none' mode
-                        if ("none" !== mode) if (useFadeAnimation) {
+            if ("none" !== mode) if (useFadeAnimation) {
                 // Add fade animation class
                 containerRef.current.classList.add("is-fade-animating"), containerRef.current.offsetHeight;
                 // Remove animation class after animation completes
@@ -12135,14 +12090,13 @@ function useEdgePanel(initialProps) {
             // Set transform or opacity based on animation type
                         useFadeAnimation ? (containerRef.current.style.opacity = "1", containerRef.current.style.transform = "") : containerRef.current.style.transform = "translate(0)", 
             // If push mode, adjust body padding
-            "push" === defaultProps.mode && adjustBodyPadding();
+            "push" === mode && adjustBodyPadding();
         }
-        defaultProps.onOpenChange && defaultProps.onOpenChange(!0);
-    }), [ defaultProps, adjustBodyPadding ]), closePanel = React.useCallback(((useFadeAnimation = !1) => {
+        onOpenChange && onOpenChange(!0);
+    }), [ mode, adjustBodyPadding, onOpenChange ]), closePanel = React.useCallback(((useFadeAnimation = !1) => {
         if (containerRef.current) {
-            const {position: position, mode: mode} = defaultProps;
             // Only add animation if not in 'none' mode
-                        if ("none" !== mode) if (useFadeAnimation) {
+            if ("none" !== mode) if (useFadeAnimation) {
                 // Add fade out animation class
                 containerRef.current.classList.add("is-fade-animating-out");
                 // Capture container for setTimeout
@@ -12164,46 +12118,42 @@ function useEdgePanel(initialProps) {
             // Then set transform
             containerRef.current.style.transform = position ? EDGE_PANEL.TRANSFORM_VALUES[position] : "", 
             // Reset body padding if push mode
-            "push" === defaultProps.mode && resetBodyPadding(), setTimeout((() => {
-                setIsOpen(!1), document.body.classList.remove("is-edgepanel-open"), defaultProps.onOpenChange && defaultProps.onOpenChange(!1);
+            "push" === mode && resetBodyPadding(), setTimeout((() => {
+                setIsOpen(!1), document.body.classList.remove("is-edgepanel-open"), onOpenChange && onOpenChange(!1);
             }), "none" === mode ? 0 : EDGE_PANEL.ANIMATION_DURATION);
-        } else setIsOpen(!1), document.body.classList.remove("is-edgepanel-open"), defaultProps.onOpenChange && defaultProps.onOpenChange(!1);
-    }), [ defaultProps, resetBodyPadding ]), handleEscapeKey = React.useCallback((event => {
-        defaultProps.closeOnEscape && "Escape" === event.key && isOpen && closePanel();
-    }), [ closePanel, defaultProps.closeOnEscape, isOpen ]), handleBackdropClick = React.useCallback((event => {
-        defaultProps.closeOnBackdropClick && event.target === event.currentTarget && closePanel();
-    }), [ closePanel, defaultProps.closeOnBackdropClick ]);
+        } else setIsOpen(!1), document.body.classList.remove("is-edgepanel-open"), onOpenChange && onOpenChange(!1);
+    }), [ mode, position, onOpenChange, resetBodyPadding ]), handleEscapeKey = React.useCallback((event => {
+        closeOnEscape && "Escape" === event.key && isOpen && closePanel();
+    }), [ closePanel, closeOnEscape, isOpen ]), handleBackdropClick = React.useCallback((event => {
+        closeOnBackdropClick && event.target === event.currentTarget && closePanel();
+    }), [ closePanel, closeOnBackdropClick ]);
     /**
    * Set up event listeners for keyboard events
    */
-    return React.useEffect((() => (isOpen && defaultProps.closeOnEscape && document.addEventListener("keydown", handleEscapeKey), 
+    return React.useEffect((() => (isOpen && closeOnEscape && document.addEventListener("keydown", handleEscapeKey), 
     () => {
         document.removeEventListener("keydown", handleEscapeKey);
-    })), [ isOpen, handleEscapeKey, defaultProps.closeOnEscape ]), 
+    })), [ isOpen, handleEscapeKey, closeOnEscape ]), 
     /**
    * Set initial transform values
    */
     React.useEffect((() => {
-        if (containerRef.current) {
-            const {position: position, mode: mode} = defaultProps;
-            isOpen || "slide" !== mode && "push" !== mode || !position || (containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position], 
-            // Set initial opacity for fade animations
-            defaultProps.glass && (containerRef.current.style.opacity = "0"));
-        }
-    }), [ defaultProps.mode, defaultProps.position, defaultProps.glass, isOpen ]), 
+        containerRef.current && (isOpen || "slide" !== mode && "push" !== mode || !position || (containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position], 
+        // Set initial opacity for fade animations
+        glass && (containerRef.current.style.opacity = "0")));
+    }), [ mode, position, glass, isOpen ]), 
     /**
    * Sync with prop changes
    */
     React.useEffect((() => {
-        void 0 !== defaultProps.isOpen && defaultProps.isOpen !== isOpen && (defaultProps.isOpen ? openPanel(!!defaultProps.glass) : closePanel(!!defaultProps.glass));
-    }), [ defaultProps.isOpen, closePanel, isOpen, openPanel, defaultProps.glass ]), 
-    {
+        void 0 !== propIsOpen && propIsOpen !== isOpen && (propIsOpen ? openPanel(!!glass) : closePanel(!!glass));
+    }), [ propIsOpen, closePanel, isOpen, openPanel, glass ]), {
         isOpen: isOpen,
         containerRef: containerRef,
         backdropRef: backdropRef,
         generateEdgePanelClass: props => {
-            const {position: position = defaultProps.position, className: className = "", isOpen: propIsOpen} = props, baseClass = EDGE_PANEL.CLASSES.BASE;
-            return `${baseClass} ${position ? `${baseClass}--${position}` : ""} ${propIsOpen ?? isOpen ? EDGE_PANEL.CLASSES.IS_OPEN : ""} ${className}`.trim();
+            const {position: propPosition = position, className: propClassName = className, isOpen: argIsOpen} = props, baseClass = EDGE_PANEL.CLASSES.BASE;
+            return `${baseClass} ${propPosition ? `${baseClass}--${propPosition}` : ""} ${argIsOpen ?? isOpen ? EDGE_PANEL.CLASSES.IS_OPEN : ""} ${propClassName}`.trim();
         },
         openPanel: openPanel,
         closePanel: closePanel,
@@ -12254,7 +12204,7 @@ const EdgePanelCloseButton =  React.forwardRef((({className: className = "", onC
 
 EdgePanelCloseButton.displayName = "EdgePanelCloseButton";
 
-const EdgePanel =  React.memo((({title: title, children: children, position: position = "start", mode: mode = "slide", isOpen: isOpen = !1, onOpenChange: onOpenChange, backdrop: backdrop = !0, closeOnBackdropClick: closeOnBackdropClick = !0, closeOnEscape: closeOnEscape = !0, className: className = "", style: style, glass: glass}) => {
+const EdgePanelComponentBase = ({title: title, children: children, position: position = "start", mode: mode = "slide", isOpen: isOpen = !1, onOpenChange: onOpenChange, backdrop: backdrop = !0, closeOnBackdropClick: closeOnBackdropClick = !0, closeOnEscape: closeOnEscape = !0, className: className = "", style: style, glass: glass}) => {
     const {isOpen: isOpenState, containerRef: containerRef, backdropRef: backdropRef, generateEdgePanelClass: generateEdgePanelClass, closePanel: closePanel, handleBackdropClick: handleBackdropClick} = useEdgePanel({
         position: position,
         mode: mode,
@@ -12330,7 +12280,7 @@ const EdgePanel =  React.memo((({title: title, children: children, position: pos
             }) : panelContent
         }) ]
     });
-}));
+}, EdgePanel =  React.memo(EdgePanelComponentBase);
 
 /**
  * Form state and functionality
@@ -12585,7 +12535,7 @@ function useHero(initialProps) {
  * @returns Slider state and methods
  */
     function(config) {
-        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = React.useState(0), [isTransitioning, setIsTransitioning] = React.useState(!1), autoplayRef = React.useRef(null), isPausedRef = React.useRef(!1), callbackRef = React.useRef(), slideRefs = React.useMemo((() => slides.map((() =>  React__default.default.createRef()))), [ slides.length ]), videoRefs = React.useMemo((() => slides.map((() =>  React__default.default.createRef()))), [ slides.length ]), handleSlideTransition = React.useCallback((nextIndex => {
+        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = React.useState(0), [isTransitioning, setIsTransitioning] = React.useState(!1), autoplayRef = React.useRef(null), isPausedRef = React.useRef(!1), callbackRef = React.useRef(void 0), slideRefs = React.useMemo((() => slides.map((() =>  React__default.default.createRef()))), [ slides ]), videoRefs = React.useMemo((() => slides.map((() =>  React__default.default.createRef()))), [ slides ]), handleSlideTransition = React.useCallback((nextIndex => {
             if (nextIndex === currentIndex || isTransitioning) return;
             if (nextIndex < 0 || nextIndex >= slides.length) return;
             setIsTransitioning(!0), 
@@ -12904,22 +12854,15 @@ function useHero(initialProps) {
  * @param initialProps - Initial side menu properties
  * @returns SideMenu state and methods
  */ function useSideMenu(initialProps) {
-    // Default side menu properties
-    const defaultProps = {
-        collapsible: !0,
-        collapsibleDesktop: !1,
-        defaultCollapsedDesktop: !1,
-        isOpen: !1,
-        ...initialProps
-    }, [isOpenState, setIsOpenState] = React.useState(void 0 !== defaultProps.defaultCollapsedDesktop ? !defaultProps.defaultCollapsedDesktop : defaultProps.isOpen || !1), wrapperRef = React.useRef(null), innerRef = React.useRef(null), sideMenuRef = React.useRef(null);
+    const {collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, isOpen: isOpen, onToggle: onToggle, disabled: disabled = !1} = initialProps || {}, [isOpenState, setIsOpenState] = React.useState(void 0 !== defaultCollapsedDesktop ? !defaultCollapsedDesktop : isOpen || !1), wrapperRef = React.useRef(null), innerRef = React.useRef(null), sideMenuRef = React.useRef(null);
     // Local open state for when not controlled externally
         // Update local state when external state changes
     React.useEffect((() => {
-        void 0 !== defaultProps.isOpen ? setIsOpenState(defaultProps.isOpen) : void 0 !== defaultProps.defaultCollapsedDesktop && setIsOpenState(!defaultProps.defaultCollapsedDesktop);
-    }), [ defaultProps.isOpen, defaultProps.defaultCollapsedDesktop ]), 
+        void 0 !== isOpen ? setIsOpenState(isOpen) : void 0 !== defaultCollapsedDesktop && setIsOpenState(!defaultCollapsedDesktop);
+    }), [ isOpen, defaultCollapsedDesktop ]), 
     // Set initial height on mount
     React.useEffect((() => {
-        const shouldCollapse = window.innerWidth < 768 ? defaultProps.collapsible : defaultProps.collapsibleDesktop, currentOpen = void 0 !== defaultProps.isOpen ? defaultProps.isOpen : isOpenState;
+        const shouldCollapse = window.innerWidth < 768 ? collapsible : collapsibleDesktop, currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
         if (shouldCollapse && wrapperRef.current && innerRef.current) {
             // Use setTimeout to ensure DOM is fully rendered
             const timeoutId = setTimeout((() => {
@@ -12928,14 +12871,14 @@ function useHero(initialProps) {
             return () => clearTimeout(timeoutId);
         }
         !shouldCollapse && wrapperRef.current && (wrapperRef.current.style.height = "auto");
-    }), []), // Only run on mount
+    }), [ collapsible, collapsibleDesktop, isOpen, isOpenState ]), 
     // Handle responsive behavior - vertical collapse for both mobile and desktop
     React.useEffect((() => {
         const handleResize = () => {
-            if (window.innerWidth < 768 ? defaultProps.collapsible : defaultProps.collapsibleDesktop) {
+            if (window.innerWidth < 768 ? collapsible : collapsibleDesktop) {
                 if (wrapperRef.current && innerRef.current) {
                     // Set proper height for vertical animation (both mobile and desktop)
-                    const currentOpen = void 0 !== defaultProps.isOpen ? defaultProps.isOpen : isOpenState;
+                    const currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
                     // Use requestAnimationFrame to ensure DOM is ready
                                         requestAnimationFrame((() => {
                         wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
@@ -12949,12 +12892,12 @@ function useHero(initialProps) {
                 return window.addEventListener("resize", handleResize), () => {
             clearTimeout(timeoutId), window.removeEventListener("resize", handleResize);
         };
-    }), [ defaultProps.collapsible, defaultProps.collapsibleDesktop, defaultProps.isOpen, defaultProps.onToggle, isOpenState ]), 
+    }), [ collapsible, collapsibleDesktop, isOpen, onToggle, isOpenState ]), 
     // Update wrapper height when open state changes (both mobile and desktop)
     React.useEffect((() => {
-        const shouldCollapse = window.innerWidth < 768 ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
+        const shouldCollapse = window.innerWidth < 768 ? collapsible : collapsibleDesktop;
         if (shouldCollapse && wrapperRef.current && innerRef.current) {
-            const currentOpen = void 0 !== defaultProps.isOpen ? defaultProps.isOpen : isOpenState;
+            const currentOpen = void 0 !== isOpen ? isOpen : isOpenState;
             // Use requestAnimationFrame to ensure DOM is ready
                         requestAnimationFrame((() => {
                 wrapperRef.current && innerRef.current && (wrapperRef.current.style.height = currentOpen ? `${innerRef.current.scrollHeight}px` : "0px");
@@ -12962,26 +12905,25 @@ function useHero(initialProps) {
         } else !shouldCollapse && wrapperRef.current && (
         // Not collapsible - always show content
         wrapperRef.current.style.height = "auto");
-    }), [ defaultProps.isOpen, isOpenState, defaultProps.collapsible, defaultProps.collapsibleDesktop ]);
+    }), [ isOpen, isOpenState, collapsible, collapsibleDesktop ]);
     /**
    * Generate side menu class based on properties
    * @param props - Side menu properties
    * @returns Class string
    */
     const handleToggle = () => {
-        if (defaultProps.disabled) return;
-        const newState = void 0 !== defaultProps.isOpen ? !defaultProps.isOpen : !isOpenState;
-        "function" == typeof defaultProps.onToggle ? 
+        if (disabled) return;
+        const newState = void 0 !== isOpen ? !isOpen : !isOpenState;
+        "function" == typeof onToggle ? 
         // Controlled component
-        defaultProps.onToggle(newState) : 
+        onToggle(newState) : 
         // Uncontrolled component
         setIsOpenState(newState);
-    }, getCurrentOpenState = () => void 0 !== defaultProps.isOpen ? defaultProps.isOpen : isOpenState;
+    }, getCurrentOpenState = () => void 0 !== isOpen ? isOpen : isOpenState;
     /**
    * Generate wrapper class
    * @returns Class string
    */    return {
-        defaultProps: defaultProps,
         isOpenState: getCurrentOpenState(),
         wrapperRef: wrapperRef,
         innerRef: innerRef,
@@ -13684,7 +13626,7 @@ SelectOption.displayName = "SelectOption";
 /**
  * Select - A component for dropdown selection
  */
-const Select =  React.memo((({options: options, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass, children: children}) => {
+const SelectComponentBase = ({options: options, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass, children: children}) => {
     const {generateSelectClass: generateSelectClass} = useSelect({
         size: size,
         disabled: disabled,
@@ -13875,7 +13817,7 @@ const Select =  React.memo((({options: options, value: value, onChange: onChange
         });
     }
     return selectContent;
-}));
+}, Select =  React.memo(SelectComponentBase);
 
 Select.displayName = "Select", Select.Option = SelectOption;
 
@@ -14442,7 +14384,7 @@ Footer.displayName = "Footer";
  */
 const MasonryGrid =  React.forwardRef((({children: children, className: className = "", xs: xs = 1, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, gap: gap = 16, animate: animate = !0, imagesLoaded: imagesLoaded = !0, onLayoutComplete: onLayoutComplete, onImageLoad: onImageLoad, ...props}, ref) => {
     // === REFS & STATE ===
-    const [columns, setColumns] = React.useState(xs), [positions, setPositions] = React.useState([]), [layoutComplete, setLayoutComplete] = React.useState(!1), [loadingImages, setLoadingImages] = React.useState(!1), containerRef = React.useRef(null), columnHeights = React.useRef([]), imagesLoadedCount = React.useRef(0), totalImagesCount = React.useRef(0), imageElements = React.useRef(new Map);
+    const [columns, setColumns] = React.useState(xs), [positions, setPositions] = React.useState([]), [, setLayoutComplete] = React.useState(!1), [loadingImages, setLoadingImages] = React.useState(!1), containerRef = React.useRef(null), columnHeights = React.useRef([]), imagesLoadedCount = React.useRef(0), totalImagesCount = React.useRef(0), imageElements = React.useRef(new Map);
     React.useEffect((() => {
         setLoadingImages(!!imagesLoaded);
     }), [ columns, imagesLoaded ]), 
@@ -14471,34 +14413,45 @@ const MasonryGrid =  React.forwardRef((({children: children, className: classNam
             });
         })), setItems(newItems);
     }), [ children ]);
-    // === TRACK & MANAGE IMAGES ===
-    const handleImageLoad = React.useCallback((img => {
-        if (!imageElements.current.get(img)) {
-            // Add loaded class for animation
-            if (imageElements.current.set(img, !0), imagesLoadedCount.current += 1, containerRef.current && imagesLoaded) {
-                const itemElement = img.closest(".o-masonry-grid > div");
-                itemElement && (itemElement.offsetHeight, itemElement.classList.add("o-masonry-grid__item-loaded"), 
-                itemElement.classList.remove("o-masonry-grid__item-loading"));
+    // === MANAGE ITEM LAYOUT ===
+    const calculateLayout = React.useCallback((() => {
+        if (!containerRef.current || 0 === items.length) return;
+        const colWidth = (containerRef.current.offsetWidth - gap * (columns - 1)) / columns;
+        columnHeights.current = Array(columns).fill(0);
+        const newPositions = [];
+        items.forEach(((item, index) => {
+            if (item.ref.current) {
+                // Find the shortest column
+                const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current)), left = shortestCol * (colWidth + gap), top = columnHeights.current[shortestCol] ?? 0, height = item.ref.current.offsetHeight;
+                columnHeights.current[shortestCol] = top + height + gap, newPositions[index] = {
+                    left: left,
+                    top: top,
+                    width: colWidth,
+                    height: height
+                };
             }
-            // Ensure layout is recalculated after DOM paints the item image (prevents overlap on slow/late image loads)
-                        requestAnimationFrame((() => {
-                requestAnimationFrame((() => {
-                    calculateLayout();
-                }));
-            })), onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current), 
-            // If all images have loaded, update loading state and complete layout
-            imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0 && (setLayoutComplete(!0), 
-            setLoadingImages(!1), // This ensures the loading class is removed *immediately* after images load
-            // Force a double requestAnimationFrame for final layout calculation after all images are loaded (guarantees DOM paint)
-            requestAnimationFrame((() => {
-                requestAnimationFrame((() => {
-                    calculateLayout(), 
-                    // As a failsafe, if still present for some render lag, force another setLoadingImages(false)
-                    setLoadingImages(!1);
-                }));
-            })), onLayoutComplete?.());
+        })), setPositions(newPositions);
+    }), [ items, columns, gap ]), handleImageLoad = React.useCallback((img => {
+        if (imageElements.current.get(img)) return;
+        // Add loaded class for animation
+        if (imageElements.current.set(img, !0), imagesLoadedCount.current += 1, containerRef.current && imagesLoaded) {
+            const itemElement = img.closest(".o-masonry-grid > div");
+            itemElement && (itemElement.offsetHeight, itemElement.classList.add("o-masonry-grid__item-loaded"), 
+            itemElement.classList.remove("o-masonry-grid__item-loading"));
         }
-    }), [ onImageLoad, onLayoutComplete, imagesLoaded ]), trackImages = React.useCallback((() => {
+        // Schedule layout recalculation after next paint to prevent overlap
+                const scheduleLayoutUpdate = () => {
+            const frameId = requestAnimationFrame((() => {
+                onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current), calculateLayout();
+            }));
+            return () => cancelAnimationFrame(frameId);
+        }, cleanup = scheduleLayoutUpdate();
+        // Clean up previous scheduled updates
+                // If all images have loaded, update loading state and complete layout
+        imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0 && (setLayoutComplete(!0), 
+        setLoadingImages(!1), setTimeout((() => cleanup()), 0), // Clean up after current execution
+        scheduleLayoutUpdate(), onLayoutComplete?.());
+    }), [ onImageLoad, onLayoutComplete, imagesLoaded, calculateLayout ]), trackImages = React.useCallback((() => {
         if (!imagesLoaded || !containerRef.current) return;
         imageElements.current.clear(), imagesLoadedCount.current = 0;
         const images = containerRef.current.querySelectorAll("img");
@@ -14517,30 +14470,21 @@ const MasonryGrid =  React.forwardRef((({children: children, className: classNam
                 img.removeEventListener("error", masonryImg._masonryLoadHandler), delete masonryImg._masonryLoadHandler);
             }));
         });
-    }), [ imagesLoaded, handleImageLoad, onLayoutComplete ]), calculateLayout = React.useCallback((() => {
-        if (!containerRef.current || 0 === items.length) return;
-        const colWidth = (containerRef.current.offsetWidth - gap * (columns - 1)) / columns;
-        columnHeights.current = Array(columns).fill(0);
-        const newPositions = [];
-        items.forEach(((item, index) => {
-            if (item.ref.current) {
-                // Find the shortest column
-                const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current)), left = shortestCol * (colWidth + gap), top = columnHeights.current[shortestCol] ?? 0, height = item.ref.current.offsetHeight;
-                columnHeights.current[shortestCol] = top + height + gap, newPositions[index] = {
-                    left: left,
-                    top: top,
-                    width: colWidth,
-                    height: height
-                };
-            }
-        })), setPositions(newPositions);
-    }), [ items, columns, gap ]);
-    // === OBSERVE CONTAINER RESIZE ===
+    }), [ imagesLoaded, handleImageLoad, onLayoutComplete ]);
+    // === TRACK & MANAGE IMAGES ===
+        // === OBSERVE CONTAINER RESIZE ===
     React.useEffect((() => {
         if (!containerRef.current) return;
-        let animationFrame = null;
-        const observer = new ResizeObserver((() => {
-            animationFrame && cancelAnimationFrame(animationFrame), animationFrame = requestAnimationFrame((() => calculateLayout()));
+        let animationFrame = null, lastWidth = 0;
+        const observer = new ResizeObserver((entries => {
+            const entry = entries[0];
+            if (!entry) return;
+            const currentWidth = entry.contentRect.width;
+            // Only recalculate if width actually changed (prevents excessive calculations)
+                        Math.abs(currentWidth - lastWidth) > 1 && (animationFrame && cancelAnimationFrame(animationFrame), 
+            animationFrame = requestAnimationFrame((() => {
+                calculateLayout(), lastWidth = currentWidth;
+            })));
         }));
         return observer.observe(containerRef.current), () => {
             observer.disconnect(), animationFrame && cancelAnimationFrame(animationFrame);
@@ -14551,24 +14495,21 @@ const MasonryGrid =  React.forwardRef((({children: children, className: classNam
     setLayoutComplete(!0), void setLoadingImages(!1))
     // Only reset layoutComplete when items or columns change
     ), [ items, columns, calculateLayout, imagesLoaded, trackImages ]), 
-    // === NEW: Add ResizeObservers to all grid items for bulletproof image+content measurement ===
+    // === ADD RESIZEOBSERVERS TO GRID ITEMS FOR DYNAMIC CONTENT MEASUREMENT ===
     React__default.default.useEffect((() => {
-        // Clean up old observers if items ever change
         const observers = [];
+        let animationFrame = null;
+        // Debounced layout calculation for item resize events
+                const debouncedCalculateLayout = () => {
+            animationFrame && cancelAnimationFrame(animationFrame), animationFrame = requestAnimationFrame(calculateLayout);
+        };
         return items.forEach((item => {
             if (item.ref.current) {
-                const obs = new ResizeObserver((() => {
-                    // Double rAF: ensures layout only runs after DOM/paint/async renders
-                    requestAnimationFrame((() => {
-                        requestAnimationFrame((() => {
-                            calculateLayout();
-                        }));
-                    }));
-                }));
+                const obs = new ResizeObserver(debouncedCalculateLayout);
                 obs.observe(item.ref.current), observers.push(obs);
             }
         })), () => {
-            observers.forEach((obs => obs.disconnect()));
+            observers.forEach((obs => obs.disconnect())), animationFrame && cancelAnimationFrame(animationFrame);
         };
     }), [ items, calculateLayout ]);
     // Ensure loadingImages state resets when items/columns/imagesLoaded change
@@ -15053,7 +14994,7 @@ const ListItem =  React.forwardRef((({children: children, className: className =
 
 ListItem.displayName = "ListItem";
 
-const List =  React.memo((({children: children, variant: variant = "default", className: className = "", style: style, ...props}) => {
+const ListComponentBase = ({children: children, variant: variant = "default", className: className = "", style: style, ...props}) => {
     var _context;
     // Generate CSS classes
         const listClasses = [ LIST.BASE_CLASS, "default" !== variant && `c-list--${variant}`, className ].filter(Boolean).join(" "), ListElement = _includesInstanceProperty(_context = [ "number", "text" ]).call(_context, variant) ? "ol" : "ul";
@@ -15067,7 +15008,7 @@ const List =  React.memo((({children: children, variant: variant = "default", cl
             children: child
         })))
     });
-}));
+}, List =  React.memo(ListComponentBase);
 
 List.displayName = "List", List.Item = ListItem;
 
@@ -16018,12 +15959,12 @@ const SideMenu =  React.forwardRef((({title: title, children: children, menuItem
             const index = Number(key);
             index >= currentLength && (delete nestedWrapperRefs.current[index], delete nestedInnerRefs.current[index]);
         })));
-    }), [ menuItems?.length ]);
+    }), [ menuItems ]);
     // Helper function to update nested wrapper height
-    const updateNestedHeight = (index, isOpen) => {
+    const updateNestedHeight = React.useCallback(((index, isOpen) => {
         const wrapper = nestedWrapperRefs.current[index], inner = nestedInnerRefs.current[index];
         wrapper && inner && (wrapper.style.height = isOpen ? `${inner.scrollHeight}px` : "0px");
-    };
+    }), []);
     // Set initial heights for nested wrappers on mount and when menuItems change
         React.useEffect((() => {
         if (!menuItems?.length) return;
@@ -16037,7 +15978,7 @@ const SideMenu =  React.forwardRef((({title: title, children: children, menuItem
         // Only run when menuItems change, nestedItemStates is read but not in deps to avoid loops
         // eslint-disable-next-line react-hooks/exhaustive-deps
         ;
-    }), [ menuItems?.length ]), 
+    }), [ menuItems, updateNestedHeight ]), 
     // Update nested wrapper heights when state changes
     React.useEffect((() => {
         if (!menuItems?.length) return;
@@ -16050,7 +15991,7 @@ const SideMenu =  React.forwardRef((({title: title, children: children, menuItem
         })), () => {
             frameIds.forEach((id => cancelAnimationFrame(id)));
         };
-    }), [ nestedItemStates, menuItems?.length ]);
+    }), [ nestedItemStates, menuItems, updateNestedHeight ]);
     // Combine refs using utility
     const combinedRef = useForkRef(sideMenuRef, ref), sideMenuClass = generateSideMenuClass({
         className: className,
@@ -16953,7 +16894,7 @@ React.useEffect((() => {
                     }
                 };
             }));
-        }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), setImagePosition = React.useCallback((position => {
+        }), [ currentIndex, calculateBounds, constrainPosition ]), setImagePosition = React.useCallback((position => {
             setImageStates((prev => {
                 const currentState = prev[currentIndex] || {
                     zoomLevel: 1,
@@ -17003,7 +16944,7 @@ React.useEffect((() => {
                     }
                 };
             }));
-        }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), handleWheel = React.useCallback((event => {
+        }), [ currentIndex, calculateBounds, constrainPosition ]), handleWheel = React.useCallback((event => {
             var _context;
             if (!isMounted || !event || !event.currentTarget) return;
             // Additional safety check for the target element
@@ -17360,7 +17301,7 @@ React.useEffect((() => {
                 }
                 return prev;
             }));
-        }), [ isMounted, enableGestures, isDragging, startDragPosition, currentIndex, constrainPosition, calculateBounds ]), handleTouchEnd = React.useCallback((() => {
+        }), [ enableGestures, isDragging, startDragPosition, currentIndex, constrainPosition, calculateBounds ]), handleTouchEnd = React.useCallback((() => {
             setIsDragging(!1), lastDistanceRef.current = null, lastMidpointRef.current = null;
         }), []), currentState = imageStates[currentIndex] || {
             zoomLevel: 1,
@@ -17564,9 +17505,9 @@ const PopoverContext =  React.createContext({
     triggerType: "click"
 }), Popover = ({content: content, position: position = "top", trigger: trigger = "click", className: className = "", style: style, delay: delay = 0, offset: offset = 12, defaultOpen: defaultOpen = !1, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, id: id, children: children, glass: glass}) => {
     const {isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, popoverRef: popoverRef, arrowRef: arrowRef, popoverId: popoverId, currentPosition: currentPosition, updatePosition: updatePosition} = (({position: position = "top", trigger: trigger = "click", offset: offset = 12, delay: delay = 0, defaultOpen: defaultOpen = !1, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, id: id}) => {
-        const [isOpen, setIsOpenState] = React.useState(defaultOpen), [currentPosition, setCurrentPosition] = React.useState("auto" === position ? "top" : position), triggerRef = React.useRef(null), popoverRef = React.useRef(null), arrowRef = React.useRef(null), timeoutRef = React.useRef(null), popoverId = id || `popover-${Math.random().toString(36).slice(2, 11)}`, isControlled = void 0 !== controlledIsOpen, isOpenState = isControlled ? controlledIsOpen : isOpen, setIsOpen = newIsOpen => {
+        const [isOpen, setIsOpenState] = React.useState(defaultOpen), [currentPosition, setCurrentPosition] = React.useState("auto" === position ? "top" : position), triggerRef = React.useRef(null), popoverRef = React.useRef(null), arrowRef = React.useRef(null), timeoutRef = React.useRef(null), popoverId = id || `popover-${Math.random().toString(36).slice(2, 11)}`, isControlled = void 0 !== controlledIsOpen, isOpenState = isControlled ? controlledIsOpen : isOpen, setIsOpen = React.useCallback((newIsOpen => {
             isControlled || setIsOpenState(newIsOpen), onOpenChange && onOpenChange(newIsOpen);
-        };
+        }), [ isControlled, onOpenChange ]);
         // Handle hover events if trigger is hover
         React.useEffect((() => {
             if ("hover" !== trigger || !triggerRef.current || !popoverRef.current) return;
@@ -17586,17 +17527,16 @@ const PopoverContext =  React.createContext({
                 setIsOpen(!1);
             };
             // Add hover event listeners
-            return triggerRef.current.addEventListener("mouseenter", handleTriggerMouseEnter), 
-            triggerRef.current.addEventListener("mouseleave", handleTriggerMouseLeave), popoverRef.current.addEventListener("mouseenter", handlePopoverMouseEnter), 
-            popoverRef.current.addEventListener("mouseleave", handlePopoverMouseLeave), () => {
-                triggerRef.current && (triggerRef.current.removeEventListener("mouseenter", handleTriggerMouseEnter), 
-                triggerRef.current.removeEventListener("mouseleave", handleTriggerMouseLeave)), 
-                popoverRef.current && (popoverRef.current.removeEventListener("mouseenter", handlePopoverMouseEnter), 
-                popoverRef.current.removeEventListener("mouseleave", handlePopoverMouseLeave)), 
-                null !== timeoutRef.current && window.clearTimeout(timeoutRef.current);
+            triggerRef.current.addEventListener("mouseenter", handleTriggerMouseEnter), triggerRef.current.addEventListener("mouseleave", handleTriggerMouseLeave), 
+            popoverRef.current.addEventListener("mouseenter", handlePopoverMouseEnter), popoverRef.current.addEventListener("mouseleave", handlePopoverMouseLeave);
+            const currentTrigger = triggerRef.current, currentPopover = popoverRef.current;
+            return () => {
+                currentTrigger && (currentTrigger.removeEventListener("mouseenter", handleTriggerMouseEnter), 
+                currentTrigger.removeEventListener("mouseleave", handleTriggerMouseLeave)), currentPopover && (currentPopover.removeEventListener("mouseenter", handlePopoverMouseEnter), 
+                currentPopover.removeEventListener("mouseleave", handlePopoverMouseLeave)), null !== timeoutRef.current && window.clearTimeout(timeoutRef.current);
             };
-        }), [ trigger, delay, isOpenState ]);
-        const updatePosition = event => {
+        }), [ trigger, delay, isOpenState, setIsOpen ]);
+        const updatePosition = React.useCallback((event => {
             if (!triggerRef.current || !popoverRef.current) return;
             const triggerRect = triggerRef.current.getBoundingClientRect(), popoverRect = popoverRef.current.getBoundingClientRect(), viewportWidth = window.innerWidth, viewportHeight = window.innerHeight, isNearViewportEdge = triggerRect.top < 50 || triggerRect.bottom > viewportHeight - 50 || triggerRect.left < 50 || triggerRect.right > viewportWidth - 50;
             // If this is a scroll update and trigger isn't near edges, skip repositioning
@@ -17657,9 +17597,9 @@ const PopoverContext =  React.createContext({
             // Add scroll position to convert viewport coordinates to absolute position
             const absoluteTop = top + window.scrollY, absoluteLeft = left + window.scrollX;
             // Apply position using absolute positioning to follow when scrolling
-            popoverRef.current.style.position = "absolute", popoverRef.current.style.top = `${absoluteTop}px`, 
-            popoverRef.current.style.left = `${absoluteLeft}px`;
-        };
+            popoverRef.current && (popoverRef.current.style.position = "absolute", popoverRef.current.style.top = `${absoluteTop}px`, 
+            popoverRef.current.style.left = `${absoluteLeft}px`);
+        }), [ position, offset ]);
         // Position the popover
                 return React.useEffect((() => {
             if (!isOpenState || !triggerRef.current || !popoverRef.current) return;
@@ -17685,7 +17625,7 @@ const PopoverContext =  React.createContext({
                 window.removeEventListener("resize", updatePosition), window.removeEventListener("scroll", handleScroll), 
                 scrollTimeout && clearTimeout(scrollTimeout), clearInterval(intervalId);
             };
-        }), [ isOpenState, position, offset ]), 
+        }), [ isOpenState, updatePosition ]), 
         // Handle click outside to close popover
         React.useEffect((() => {
             if (!isOpenState || !closeOnClickOutside) return;
@@ -17695,7 +17635,7 @@ const PopoverContext =  React.createContext({
             return document.addEventListener("mousedown", handleClickOutside), () => {
                 document.removeEventListener("mousedown", handleClickOutside);
             };
-        }), [ isOpenState, closeOnClickOutside ]), 
+        }), [ isOpenState, closeOnClickOutside, setIsOpen ]), 
         // Handle escape key to close popover
         React.useEffect((() => {
             if (!isOpenState || !closeOnEscape) return;
@@ -17705,7 +17645,7 @@ const PopoverContext =  React.createContext({
             return document.addEventListener("keydown", handleEscapeKey), () => {
                 document.removeEventListener("keydown", handleEscapeKey);
             };
-        }), [ isOpenState, closeOnEscape ]), 
+        }), [ isOpenState, closeOnEscape, setIsOpen ]), 
         // Clean up on unmount
         React.useEffect((() => () => {
             null !== timeoutRef.current && window.clearTimeout(timeoutRef.current);
@@ -17886,10 +17826,11 @@ const calculateStarValue = (e, starValue, allowHalf) => {
     }), [ readOnly, onChange, allowHalf ]);
     // Use vanilla JS implementation if specified
     React.useEffect((() => {
-        if (useVanillaJS && "undefined" != typeof window && internalRef.current) 
+        if (!useVanillaJS || "undefined" == typeof window || !internalRef.current) return;
+        const currentInstance = ratingInstance.current;
         // Cleanup on unmount
-        return () => {
-            ratingInstance.current && ratingInstance.current.destroy();
+                return () => {
+            currentInstance && currentInstance.destroy();
         };
     }), [ useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, variant, onChange ]), 
     // Update vanilla JS implementation when props change
@@ -18010,10 +17951,11 @@ const ProductReview = ({productName: productName, productImage: productImage, in
     const [rating, setRating] = React.useState(initialRating), [comment, setComment] = React.useState(""), [submitted, setSubmitted] = React.useState(!1), reviewRef = React.useRef(null), reviewInstance = React.useRef(null);
     React.useEffect((() => {
         // Only run on client-side
-        if ("undefined" != typeof window && reviewRef.current) 
+        if ("undefined" == typeof window || !reviewRef.current) return;
+        const currentInstance = reviewInstance.current;
         // Cleanup on unmount
-        return () => {
-            reviewInstance.current && reviewInstance.current.destroy();
+                return () => {
+            currentInstance && currentInstance.destroy();
         };
     }), [ productName, productImage, initialRating, maxRating, allowHalf, ratingColor, onSubmit ]);
     const handleSubmit = e => {
@@ -18258,10 +18200,11 @@ const SectionIntro = ({title: title, label: label, text: text, actions: actions,
     const sectionIntroRef = React.useRef(null), sectionIntroInstance = React.useRef(null);
     React.useEffect((() => {
         // Only run on client-side
-        if ("undefined" != typeof window && sectionIntroRef.current) 
+        if ("undefined" == typeof window || !sectionIntroRef.current) return;
+        const currentInstance = sectionIntroInstance.current;
         // Cleanup on unmount
-        return () => {
-            sectionIntroInstance.current && sectionIntroInstance.current.destroy();
+                return () => {
+            currentInstance && currentInstance.destroy();
         };
     }), [ alignment, backgroundImageSrc, showOverlay, size, skeleton ]);
     // Determine CSS classes
@@ -18345,7 +18288,7 @@ SectionIntro.displayName = "SectionIntro";
 
 const Slider =  React.forwardRef(((props, ref) => {
     const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, validSlides = Array.isArray(slides) ? slides : [], slider = function(options) {
-        const {slides: rawSlides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, slides = Array.isArray(rawSlides) ? rawSlides : [], containerRef = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.useRef({
+        const {slides: rawSlides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, slides = React.useMemo((() => Array.isArray(rawSlides) ? rawSlides : []), [ rawSlides ]), containerRef = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.useRef({
             isTransitioning: !1,
             loop: loop,
             slides: slides,
@@ -18480,7 +18423,7 @@ const Slider =  React.forwardRef(((props, ref) => {
                     setIsTransitioning(!1), onSlideChange?.(nextIndex);
                 }), speed);
             }
-        }), [ realIndex, internalIndex, slides.length, slidesToShow, loop, isTransitioning, speed, onSlideChange, allSlides.length, loopedSlides, autoplay ]), slidePrev = React.useCallback((() => {
+        }), [ realIndex, internalIndex, slides.length, slidesToShow, loop, isTransitioning, speed, onSlideChange, autoplay ]), slidePrev = React.useCallback((() => {
             if (!isTransitioning) if (
             // Stop autoplay on interaction if disableOnInteraction is true
             autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
@@ -18502,7 +18445,7 @@ const Slider =  React.forwardRef(((props, ref) => {
                     setIsTransitioning(!1), onSlideChange?.(prevIndex);
                 }), speed);
             }
-        }), [ realIndex, internalIndex, slides.length, loop, isTransitioning, speed, onSlideChange, allSlides.length, loopedSlides, autoplay ]), goToSlide = React.useCallback((index => {
+        }), [ realIndex, internalIndex, slides.length, loop, isTransitioning, speed, onSlideChange, autoplay ]), goToSlide = React.useCallback((index => {
             isTransitioning || index === realIndex || (
             // Stop autoplay on interaction if disableOnInteraction is true
             autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
@@ -18510,7 +18453,7 @@ const Slider =  React.forwardRef(((props, ref) => {
             setRealIndex(index), setInternalIndex(loop ? slides.length + index : index), setTimeout((() => {
                 setIsTransitioning(!1), onSlideChange?.(index);
             }), speed));
-        }), [ realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides, autoplay ]), handleTouchStart = React.useCallback((e => {
+        }), [ realIndex, isTransitioning, speed, onSlideChange, loop, slides.length, autoplay ]), handleTouchStart = React.useCallback((e => {
             if (!allowTouchMove) return;
             // Stop autoplay on interaction if disableOnInteraction is true
                         autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
@@ -18765,7 +18708,7 @@ const Steps = ({items: items, activeIndex: activeIndex = 0, vertical: vertical =
         let content;
     React.useEffect((() => {
         currentStep !== activeIndex && setCurrentStep(activeIndex);
-    }), [ activeIndex ]), 
+    }), [ activeIndex, currentStep ]), 
     // Legacy rendering
     content = items && items.length > 0 ? items.map(((item, index) => jsxRuntime.jsx(StepsItem, {
         index: index,
@@ -18909,7 +18852,7 @@ const TabsPanel =  React.forwardRef((({children: children, className: className
 
 TabsPanel.displayName = "TabsPanel";
 
-const Tabs =  React.memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass, children: children}) => {
+const TabsComponentBase = ({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass, children: children}) => {
     const [currentTab, setCurrentTab] = React.useState(activeIndex), handleTabClick = index => {
         setCurrentTab(index), onTabChange && onTabChange(index);
     }, handleKeyDown = (event, totalTabs) => {
@@ -19025,7 +18968,7 @@ const Tabs =  React.memo((({items: items, activeIndex: activeIndex = TAB.DEFAULT
         });
     }
     return wrapper;
-}));
+}, Tabs =  React.memo(TabsComponentBase);
 
 Tabs.displayName = "Tabs", Tabs.List = TabsList, Tabs.Trigger = TabsTrigger, Tabs.Panels = TabsPanels, 
 Tabs.Panel = TabsPanel;
@@ -19037,10 +18980,11 @@ const Testimonial = ({quote: quote, author: author, size: size = "", skeleton: s
     const testimonialRef = React.useRef(null), testimonialInstance = React.useRef(null);
     React.useEffect((() => {
         // Only run on client-side
-        if ("undefined" != typeof window && testimonialRef.current) 
+        if ("undefined" == typeof window || !testimonialRef.current) return;
+        const currentInstance = testimonialInstance.current;
         // Cleanup on unmount
-        return () => {
-            testimonialInstance.current && testimonialInstance.current.destroy();
+                return () => {
+            currentInstance && currentInstance.destroy();
         };
     }), [ size, skeleton ]);
     // Determine CSS classes
@@ -20181,11 +20125,13 @@ const VideoPlayer =  React.forwardRef((({src: src, type: type = "video", youtube
                 detectBorderRadius();
         // Create ResizeObserver to watch for style changes
         let resizeObserver = null;
-        return "undefined" != typeof ResizeObserver && containerRef.current && (resizeObserver = new ResizeObserver(detectBorderRadius), 
+        "undefined" != typeof ResizeObserver && containerRef.current && (resizeObserver = new ResizeObserver(detectBorderRadius), 
         resizeObserver.observe(containerRef.current)), 
         // Also listen for window resize (in case styles change)
-        window.addEventListener("resize", detectBorderRadius), () => {
-            window.removeEventListener("resize", detectBorderRadius), resizeObserver && containerRef.current && (resizeObserver.unobserve(containerRef.current), 
+        window.addEventListener("resize", detectBorderRadius);
+        const currentContainer = containerRef.current;
+        return () => {
+            window.removeEventListener("resize", detectBorderRadius), resizeObserver && currentContainer && (resizeObserver.unobserve(currentContainer), 
             resizeObserver.disconnect());
         };
     }), []);
@@ -22536,7 +22482,7 @@ const logger = getLogger(), ThemeProvider = ({children: children, defaultTheme:
         // If defaultTheme is provided, use it
                 return null != defaultTheme ? defaultTheme : "default";
         // Default fallback
-        }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = React.useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = React.useState((() => {
+        }), [ defaultTheme, enablePersistence, storageKey, storageAdapter ]), [currentTheme, setCurrentTheme] = React.useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = React.useState((() => {
         // If defaultTheme is DesignTokens, validate and store them
         if (defaultTheme && "string" != typeof defaultTheme) {
             const {tokens: tokens, validation: validation} = validateAndMergeTokens(defaultTheme);
@@ -23839,7 +23785,7 @@ class ThemeValidator {
  *
  * Provides detailed inspection and debugging information for themes
  */ const ThemeInspector = ({theme: theme, showValidation: showValidation = !0, showCSSVariables: showCSSVariables = !0, showStructure: showStructure = !0, className: className, style: style}) => {
-    const [activeTab, setActiveTab] = React.useState("overview"), [expandedSections, setExpandedSections] = React.useState(new Set([ "palette" ])), [searchQuery, setSearchQuery] = React.useState(""), [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState(""), [copiedPath, setCopiedPath] = React.useState(null), searchTimeoutRef = React.useRef();
+    const [activeTab, setActiveTab] = React.useState("overview"), [expandedSections, setExpandedSections] = React.useState(new Set([ "palette" ])), [searchQuery, setSearchQuery] = React.useState(""), [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState(""), [copiedPath, setCopiedPath] = React.useState(null), searchTimeoutRef = React.useRef(void 0);
     // Debounce search query
     React.useEffect((() => (searchTimeoutRef.current && clearTimeout(searchTimeoutRef.current), 
     searchTimeoutRef.current = setTimeout((() => {
@@ -24245,7 +24191,7 @@ class ThemeValidator {
         }) ]
     });
 }, ThemeComparator = ({themeA: themeA, themeB: themeB, showOnlyDifferences: showOnlyDifferences = !1, className: className, style: style}) => {
-    const [searchQuery, setSearchQuery] = React.useState(""), [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState(""), [filterType, setFilterType] = React.useState("all"), [filterCategory, setFilterCategory] = React.useState("all"), searchTimeoutRef = React.useRef();
+    const [searchQuery, setSearchQuery] = React.useState(""), [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState(""), [filterType, setFilterType] = React.useState("all"), [filterCategory, setFilterCategory] = React.useState("all"), searchTimeoutRef = React.useRef(void 0);
     // Debounce search query
     React.useEffect((() => (searchTimeoutRef.current && clearTimeout(searchTimeoutRef.current), 
     searchTimeoutRef.current = setTimeout((() => {
@@ -25041,7 +24987,7 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
         } catch (err) {
             setError(err instanceof Error ? err.message : "Invalid JSON");
         }
-    }), [ updateTheme ]), jsonUpdateTimeoutRef = React.useRef();
+    }), [ updateTheme ]), jsonUpdateTimeoutRef = React.useRef(void 0);
     // Debounced JSON update to history
         React.useEffect((() => {
         if (!error) {
@@ -26185,45 +26131,21 @@ function mergePartStyles(base, override) {
 }
 
 /**
- * Render a slot with the given props
- *
- * Priority order:
- * 1. render function
- * 2. component
- * 3. children
- * 4. fallback
+ * Hook to merge theme overrides with component props
  *
  * @example
- * renderSlot(
- *   { render: (props) => <CustomButton {...props} /> },
- *   { onClick: handleClick, children: 'Click me' }
- * )
- */ function renderSlot(slot, props, fallback) {
-    // No slot provided, use fallback
-    if (!slot) return fallback;
-    // Slot is a plain React node
-        if ( React__default.default.isValidElement(slot) || "string" == typeof slot || "number" == typeof slot) return slot;
-    // Slot is an object with rendering options
-        if ("object" == typeof slot && null !== slot) {
-        const slotObj = slot;
-        // Priority 1: render function
-                if (slotObj.render && "function" == typeof slotObj.render) return slotObj.render(props);
-        // Priority 2: component
-                if (slotObj.component) {
-            const Component = slotObj.component;
-            return jsxRuntime.jsx(Component, {
-                ...props
-            });
-        }
-        // Priority 3: children
-                if (void 0 !== slotObj.children) return slotObj.children;
-    }
-    // Fallback
-        return fallback;
-}
-
-/**
- * Check if a value is a slot configuration
+ * function Button(props: ButtonProps) {
+ *   const customization = useComponentCustomization('Button', props);
+ *
+ *   return (
+ *     <button
+ *       className={customization.className}
+ *       style={customization.style}
+ *     >
+ *       {props.children}
+ *     </button>
+ *   );
+ * }
  */
 // Import and re-export as namespaces with proper typing
 // Export as namespaces with explicit typing
@@ -26626,25 +26548,7 @@ 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.useChartData = useChartData, exports.useChartInteraction = useChartInteraction, 
-exports.useChartScale = useChartScale, exports.useComponentCustomization = 
-/**
- * Hook to merge theme overrides with component props
- *
- * @example
- * function Button(props: ButtonProps) {
- *   const customization = useComponentCustomization('Button', props);
- *
- *   return (
- *     <button
- *       className={customization.className}
- *       style={customization.style}
- *     >
- *       {props.children}
- *     </button>
- *   );
- * }
- */
-function(component, props) {
+exports.useChartScale = useChartScale, exports.useComponentCustomization = function(component, props) {
     const {theme: theme} = useTheme(), cssVars = React.useMemo((() => mergeCSSVars(theme?.components?.[component]?.cssVars || {}, props.cssVars || {})), [ theme, component, props.cssVars ]), parts = React.useMemo((() => {
         const themeParts = theme?.components?.[component]?.parts || {}, propParts = props.parts || {}, merged = {};
         return new Set([ ...Object.keys(themeParts), ...Object.keys(propParts) ]).forEach((partName => {