@shohojdhara/atomix 0.5.1 → 0.5.2

package/dist/index.js

@@ -1988,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
    */
@@ -2009,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
@@ -5344,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
@@ -5360,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,
@@ -5387,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,
@@ -5441,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";
@@ -5552,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
@@ -5678,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
@@ -5968,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
@@ -6059,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
@@ -6451,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,
@@ -6941,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
@@ -6952,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
@@ -6966,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({
@@ -7154,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 => {
@@ -7746,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);
@@ -8159,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,
@@ -8185,7 +8251,7 @@ function useBarChart(datasets, options = {}) {
                     y: horizontal ? y + height / 2 : y - 5
                 };
             }
-        }), [ options.dataLabelPosition ]),
+        }), [ options ]),
         // Handlers
         handleBarHover: handleBarHover,
         handleBarLeave: handleBarLeave,
@@ -8495,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;
@@ -9460,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,
@@ -10896,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 => {
@@ -11441,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` : ""), 
@@ -11964,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";
@@ -11993,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) {
@@ -12012,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
@@ -12036,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
@@ -12065,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,
@@ -12155,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,
@@ -12231,7 +12280,7 @@ const EdgePanel =  React.memo((({title: title, children: children, position: pos
             }) : panelContent
         }) ]
     });
-}));
+}, EdgePanel =  React.memo(EdgePanelComponentBase);
 
 /**
  * Form state and functionality
@@ -12486,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), 
@@ -12805,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((() => {
@@ -12829,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");
@@ -12850,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");
@@ -12863,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,
@@ -13585,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,
@@ -13776,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;
 
@@ -14343,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 ]), 
@@ -14372,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");
@@ -14418,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);
@@ -14452,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
@@ -14954,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";
@@ -14968,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;
 
@@ -15919,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;
@@ -15938,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;
@@ -15951,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,
@@ -16854,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,
@@ -16904,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
@@ -17261,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,
@@ -17465,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;
@@ -17487,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
@@ -17558,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;
@@ -17586,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;
@@ -17596,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;
@@ -17606,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);
@@ -17787,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
@@ -17911,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 => {
@@ -18159,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
@@ -18246,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,
@@ -18381,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), 
@@ -18403,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), 
@@ -18411,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), 
@@ -18666,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,
@@ -18810,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) => {
@@ -18926,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;
@@ -18938,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
@@ -20082,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());
         };
     }), []);
@@ -22437,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);
@@ -23740,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((() => {
@@ -24146,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((() => {
@@ -24942,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) {
@@ -26086,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
@@ -26527,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 => {