@shohojdhara/atomix 0.3.4 → 0.3.5

package/dist/index.esm.js

@@ -1542,14 +1542,14 @@ function useAccordion(initialProps) {
     };
     // Controlled/uncontrolled open state
         /**
-     * Effect to update panel height when open state changes
-     */
+   * Effect to update panel height when open state changes
+   */
     return useEffect((() => {
         updatePanelHeight();
     }), [ isOpen ]), 
     /**
-     * Effect to handle window resize and update panel height
-     */
+   * Effect to handle window resize and update panel height
+   */
     useEffect((() => {
         const handleResize = () => {
             isOpen && updatePanelHeight();
@@ -1638,7 +1638,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
         const childArray = React.Children.toArray(children);
         for (let i = 0; i < childArray.length; i++) {
             const child = childArray[i];
-            if (React.isValidElement(child)) {
+            if ( React.isValidElement(child)) {
                 const radius = extractBorderRadiusFromElement(child);
                 if (null !== radius) return radius;
             }
@@ -1806,7 +1806,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer = forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
 }, globalMousePosition: globalMousePosition = {
@@ -2068,8 +2068,8 @@ class {
             y: 0
         }, this.rafId = null, this.lastEvent = null, this.isTracking = !1, 
         /**
-         * Handle mouse move event
-         */
+     * Handle mouse move event
+     */
         this.handleMouseMove = e => {
             this.lastEvent = e, 
             // Use requestAnimationFrame to throttle updates
@@ -2090,10 +2090,10 @@ class {
         };
     }
     /**
-     * Subscribe to mouse position updates
-     * @param callback Function to call when mouse position changes
-     * @returns Unsubscribe function
-     */    subscribe(callback) {
+   * Subscribe to mouse position updates
+   * @param callback Function to call when mouse position changes
+   * @returns Unsubscribe function
+   */    subscribe(callback) {
         // Return unsubscribe function
         return this.listeners.add(callback), 
         // Start tracking if this is the first subscriber
@@ -2104,15 +2104,15 @@ class {
         };
     }
     /**
-     * Unsubscribe from mouse position updates
-     */    unsubscribe(callback) {
+   * Unsubscribe from mouse position updates
+   */    unsubscribe(callback) {
         this.listeners.delete(callback), 
         // Stop tracking if no more subscribers
         0 === this.listeners.size && this.stopTracking();
     }
     /**
-     * Start tracking mouse movement
-     */    startTracking() {
+   * Start tracking mouse movement
+   */    startTracking() {
         this.isTracking || (this.isTracking = !0, 
         // Use document-level listener for global tracking
         document.addEventListener("mousemove", this.handleMouseMove, {
@@ -2120,22 +2120,22 @@ class {
         }));
     }
     /**
-     * Stop tracking mouse movement
-     */    stopTracking() {
+   * Stop tracking mouse movement
+   */    stopTracking() {
         this.isTracking && (this.isTracking = !1, document.removeEventListener("mousemove", this.handleMouseMove), 
         // Cancel any pending RAF
         null !== this.rafId && (cancelAnimationFrame(this.rafId), this.rafId = null), this.lastEvent = null);
     }
     /**
-     * Get current mouse position (synchronous)
-     */    getPosition() {
+   * Get current mouse position (synchronous)
+   */    getPosition() {
         return {
             ...this.position
         };
     }
     /**
-     * Get number of active subscribers (for debugging)
-     */    getSubscriberCount() {
+   * Get number of active subscribers (for debugging)
+   */    getSubscriberCount() {
         return this.listeners.size;
     }
 }, {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
@@ -2479,11 +2479,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ effectiveCornerRadius, glassRef ]);
     // OverLight config
     /**
-     * Get effective overLight value based on configuration
-     * - boolean: returns the boolean value directly
-     * - 'auto': returns detectedOverLight (auto-detected from background)
-     * - object: returns detectedOverLight (auto-detected, but config object provides customization)
-     */
+   * Get effective overLight value based on configuration
+   * - boolean: returns the boolean value directly
+   * - 'auto': returns detectedOverLight (auto-detected from background)
+   * - object: returns detectedOverLight (auto-detected, but config object provides customization)
+   */
     const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
         const isOverLight = getEffectiveOverLight(), mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
             isOverLight: isOverLight,
@@ -2513,13 +2513,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
     }), [ onClick ]), handleMouseMove = useCallback((_e => {}), []);
     /**
-     * Validate and clamp a numeric config value
-     * @param value - The value to validate
-     * @param min - Minimum allowed value
-     * @param max - Maximum allowed value
-     * @param defaultValue - Default value if validation fails
-     * @returns Validated and clamped value
-     */    return {
+   * Validate and clamp a numeric config value
+   * @param value - The value to validate
+   * @param min - Minimum allowed value
+   * @param max - Maximum allowed value
+   * @param defaultValue - Default value if validation fails
+   * @returns Validated and clamped value
+   */    return {
         // State
         isHovered: isHovered,
         isActive: isActive,
@@ -2852,7 +2852,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     });
 }
 
-const Accordion = ({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
+const Accordion =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
     // Generate unique IDs for accessibility
     const instanceId = useId(), buttonId = `accordion-header-${instanceId}`, panelId = `accordion-panel-${instanceId}`, {state: state, toggle: toggle, updatePanelHeight: updatePanelHeight, panelRef: panelRef, contentRef: contentRef, generateClassNames: generateClassNames, generateHeaderClassNames: generateHeaderClassNames} = useAccordion({
         defaultOpen: defaultOpen,
@@ -2923,7 +2923,7 @@ const Accordion = ({title: title, children: children, defaultOpen: defaultOpen =
         });
     }
     return accordionContent;
-};
+}));
 
 // Set display name for debugging
 Accordion.displayName = "Accordion";
@@ -3257,7 +3257,7 @@ const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "cur
 // Constants
 Icon.displayName = "Icon";
 
-const Avatar = ({src: src, alt: alt = "Avatar", initials: initials, icon: icon, size: size = "md", circle: circle = !1, className: className = "", disabled: disabled = !1, onClick: onClick, style: style, glass: glass}) => {
+const Avatar =  memo((({src: src, alt: alt = "Avatar", initials: initials, icon: icon, size: size = "md", circle: circle = !1, className: className = "", disabled: disabled = !1, onClick: onClick, style: style, glass: glass}) => {
     const [imageError, setImageError] = useState(!1), avatarClasses = [ AVATAR.CLASSES.BASE, "md" !== size && `c-avatar--${size}`, circle && AVATAR.CLASSES.CIRCLE, disabled && "is-disabled", className ].filter(Boolean).join(" ");
     return jsx("div", {
         className: avatarClasses,
@@ -3289,18 +3289,18 @@ const Avatar = ({src: src, alt: alt = "Avatar", initials: initials, icon: icon,
             })
         })
     });
-};
+}));
 
 Avatar.displayName = "Avatar";
 
 const AvatarGroup = ({children: children, max: max, stacked: stacked = !1, className: className = "", style: style, moreText: moreText}) => {
     // Generate CSS classes
-    const avatarGroupClasses = [ AVATAR_GROUP.CLASSES.BASE, stacked && AVATAR_GROUP.CLASSES.STACKED, className ].filter(Boolean).join(" "), avatarChildren = Children.toArray(children).filter((child => isValidElement(child) && child.type === Avatar)), showMoreIndicator = void 0 !== max && avatarChildren.length > max, visibleAvatars = showMoreIndicator ? avatarChildren.slice(0, max) : avatarChildren, hiddenAvatarCount = avatarChildren.length - (max || 0), firstAvatar = isValidElement(avatarChildren[0]) ? avatarChildren[0].props : null, avatarSize = firstAvatar?.size || "md", isCircle = firstAvatar?.circle || !1, moreClasses = [ AVATAR.CLASSES.BASE, AVATAR_GROUP.CLASSES.MORE, "md" !== avatarSize && `c-avatar--${avatarSize}`, isCircle && "c-avatar--circle" ].filter(Boolean).join(" ");
+    const avatarGroupClasses = [ AVATAR_GROUP.CLASSES.BASE, stacked && AVATAR_GROUP.CLASSES.STACKED, className ].filter(Boolean).join(" "), avatarChildren = Children.toArray(children).filter((child =>  isValidElement(child) && child.type === Avatar)), showMoreIndicator = void 0 !== max && avatarChildren.length > max, visibleAvatars = showMoreIndicator ? avatarChildren.slice(0, max) : avatarChildren, hiddenAvatarCount = avatarChildren.length - (max || 0), firstAvatar =  isValidElement(avatarChildren[0]) ? avatarChildren[0].props : null, avatarSize = firstAvatar?.size || "md", isCircle = firstAvatar?.circle || !1, moreClasses = [ AVATAR.CLASSES.BASE, AVATAR_GROUP.CLASSES.MORE, "md" !== avatarSize && `c-avatar--${avatarSize}`, isCircle && "c-avatar--circle" ].filter(Boolean).join(" ");
     // Get valid Avatar children
         return jsxs("div", {
         className: avatarGroupClasses,
         style: style,
-        children: [ visibleAvatars.map(((child, index) => isValidElement(child) ? cloneElement(child, {
+        children: [ visibleAvatars.map(((child, index) =>  isValidElement(child) ?  cloneElement(child, {
             key: index,
             ...child.props
         }) : null)), showMoreIndicator && jsx("div", {
@@ -3324,10 +3324,10 @@ function useBadge(initialProps) {
         ...initialProps
     };
     /**
-     * Generate badge class based on properties
-     * @param props - Badge properties
-     * @returns Class string
-     */    return {
+   * Generate badge class based on properties
+   * @param props - Badge properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateBadgeClass: props => {
             const {variant: variant = defaultProps.variant, size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, className: className = ""} = props;
@@ -3338,7 +3338,7 @@ function useBadge(initialProps) {
 
 AvatarGroup.displayName = "AvatarGroup";
 
-const Badge = ({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, className: className = "", glass: glass, style: style}) => {
+const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, className: className = "", glass: glass, style: style}) => {
     const {generateBadgeClass: generateBadgeClass} = useBadge({
         variant: variant,
         size: size,
@@ -3377,7 +3377,7 @@ const Badge = ({label: label, variant: variant = "primary", size: size = "md", d
         });
     }
     return badgeElement;
-};
+}));
 
 Badge.displayName = "Badge";
 
@@ -3400,7 +3400,7 @@ Badge.displayName = "Badge";
  * </Container>
  * ```
  */
-const Container = forwardRef((({children: children, className: className = "", type: type, ...props}, ref) => {
+const Container =  forwardRef((({children: children, className: className = "", type: type, ...props}, ref) => {
     let containerClass = "o-container";
     return type && (containerClass = `o-container-${type}`), jsx("div", {
         ref: ref,
@@ -3431,7 +3431,7 @@ const useBlock = () => ({
         // Add custom className
         className && classes.push(className), classes.filter(Boolean).join(" ");
     }
-}), Block = forwardRef((({children: children, as: Component = "section", spacing: spacing = "md", container: container = {}, fullWidth: fullWidth = !1, className: className = "", style: style, background: background = "", ...props}, ref) => {
+}), Block =  forwardRef((({children: children, as: Component = "section", spacing: spacing = "md", container: container = {}, fullWidth: fullWidth = !1, className: className = "", style: style, background: background = "", ...props}, ref) => {
     const {generateBlockClass: generateBlockClass} = useBlock(), blockClasses = generateBlockClass({
         spacing: spacing,
         background: background,
@@ -3485,7 +3485,7 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb = ({items: items, divider: divider, className: className = "", ariaLabel: ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", ariaLabel: ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
     return jsx("nav", {
         "aria-label": ariaLabel,
@@ -3518,7 +3518,7 @@ const Breadcrumb = ({items: items, divider: divider, className: className = "",
             }))
         })
     });
-};
+}));
 
 /**
  * Button state and functionality
@@ -3540,10 +3540,10 @@ function useButton(initialProps) {
         ...initialProps
     };
     /**
-     * Generate button class based on properties
-     * @param props - Button properties
-     * @returns Class string
-     */    return {
+   * Generate button class based on properties
+   * @param props - Button properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateButtonClass: props => {
             const {variant: variant = defaultProps.variant, size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, rounded: rounded = defaultProps.rounded, iconOnly: iconOnly = !1, glass: glass = defaultProps.glass, loading: loading = defaultProps.loading, fullWidth: fullWidth = defaultProps.fullWidth, block: block = defaultProps.block, active: active = defaultProps.active, selected: selected = defaultProps.selected, className: className = ""} = props, sizeClass = "md" === size ? "" : `c-btn--${size}`, iconOnlyClass = iconOnly ? "c-btn--icon" : "", roundedClass = rounded ? "c-btn--rounded" : "", disabledClass = disabled ? "c-btn--disabled" : "", glassClass = glass ? "c-btn--glass" : "", loadingClass = loading ? BUTTON.CLASSES.LOADING : "", fullWidthClass = fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", blockClass = block ? BUTTON.CLASSES.BLOCK : "", activeClass = active ? BUTTON.CLASSES.ACTIVE : "", selectedClass = selected ? BUTTON.CLASSES.SELECTED : "";
@@ -3568,10 +3568,10 @@ function useButton(initialProps) {
         ...initialProps
     };
     /**
-     * Generate spinner class based on properties
-     * @param props - Spinner properties
-     * @returns Class string
-     */    return {
+   * Generate spinner class based on properties
+   * @param props - Spinner properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateSpinnerClass: props => {
             const {variant: variant = defaultProps.variant, size: size = defaultProps.size, fullscreen: fullscreen = defaultProps.fullscreen, className: className = ""} = props;
@@ -3582,7 +3582,7 @@ function useButton(initialProps) {
 
 Breadcrumb.displayName = "Breadcrumb";
 
-const Spinner = ({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass}) => {
+const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass}) => {
     const {generateSpinnerClass: generateSpinnerClass} = useSpinner({
         size: size,
         variant: variant,
@@ -3617,11 +3617,11 @@ const Spinner = ({size: size = "md", variant: variant = "primary", fullscreen: f
         });
     }
     return spinnerContent;
-};
+}));
 
 Spinner.displayName = "Spinner";
 
-const Button = React.memo(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, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React.memo( 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, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = useMemo((() => loading ? null : iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -3787,10 +3787,379 @@ const Button = React.memo(forwardRef((({label: label, children: children, onClic
 
 Button.displayName = "Button";
 
-/**
- * Callout component for displaying important messages, notifications, or alerts
- */
-const Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, oneLine: oneLine = !1, toast: toast = !1, glass: glass, className: className, style: style, ...props}) => {
+var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+
+var fails$9 = function(exec) {
+    try {
+        return !!exec();
+    } catch (error) {
+        return !0;
+    }
+}, functionBindNative = !fails$9((function() {
+    // eslint-disable-next-line es/no-function-prototype-bind -- safe
+    var test = function() {/* empty */}.bind();
+    // eslint-disable-next-line no-prototype-builtins -- safe
+        return "function" != typeof test || test.hasOwnProperty("prototype");
+})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
+    return function() {
+        return call$5.apply(fn, arguments);
+    };
+}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
+    return it && it.Math === Math && it;
+}, globalThis_1 = 
+// eslint-disable-next-line es/no-global-this -- safe
+check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
+// eslint-disable-next-line no-restricted-globals -- safe
+check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
+// eslint-disable-next-line no-new-func -- fallback
+function() {
+    return this;
+}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
+    return call$4.apply(apply$1, arguments);
+}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
+    return stringSlice(toString$3(it), 8, -1);
+}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
+    // Nashorn bug:
+    //   https://github.com/zloirock/core-js/issues/1128
+    //   https://github.com/zloirock/core-js/issues/1130
+    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
+}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
+    return "function" == typeof argument || argument === documentAll;
+} : function(argument) {
+    return "function" == typeof argument;
+}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$9((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty({}, 1, {
+        get: function() {
+            return 7;
+        }
+    })[1];
+})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
+    return call$3.apply(call$3, arguments);
+}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
+    1: 2
+}, 1);
+
+// `Object.prototype.propertyIsEnumerable` method implementation
+// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
+objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
+    var descriptor = getOwnPropertyDescriptor$1(this, V);
+    return !!descriptor && descriptor.enumerable;
+} : $propertyIsEnumerable;
+
+var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
+    return {
+        enumerable: !(1 & bitmap),
+        configurable: !(2 & bitmap),
+        writable: !(4 & bitmap),
+        value: value
+    };
+}, fails$6 = fails$9, classof$4 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$6((function() {
+    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
+    // eslint-disable-next-line no-prototype-builtins -- safe
+    return !$Object$3("z").propertyIsEnumerable(0);
+})) ? function(it) {
+    return "String" === classof$4(it) ? split(it, "") : $Object$3(it);
+} : $Object$3, isNullOrUndefined$2 = function(it) {
+    return null == it;
+}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$7 = TypeError, requireObjectCoercible$3 = function(it) {
+    if (isNullOrUndefined$1(it)) throw new $TypeError$7("Can't call method on " + it);
+    return it;
+}, IndexedObject$1 = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
+    return IndexedObject$1(requireObjectCoercible$2(it));
+}, isCallable$7 = isCallable$8, isObject$6 = function(it) {
+    return "object" == typeof it ? null !== it : isCallable$7(it);
+}, path$3 = {}, path$2 = path$3, globalThis$b = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
+    return isCallable$6(variable) ? variable : void 0;
+}, navigator$1 = globalThis_1.navigator, userAgent$2 = navigator$1 && navigator$1.userAgent, environmentUserAgent = userAgent$2 ? String(userAgent$2) : "", globalThis$9 = globalThis_1, userAgent$1 = environmentUserAgent, process$1 = globalThis$9.process, Deno$1 = globalThis$9.Deno, versions = process$1 && process$1.versions || Deno$1 && Deno$1.version, v8 = versions && versions.v8;
+
+v8 && (
+// in old Chrome, versions of V8 isn't V8 = Chrome / 10
+// but their correct versions are not interesting for us
+version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
+// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
+// so check `userAgent` even if `.v8` exists, but 0
+!version && userAgent$1 && (!(match = userAgent$1.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent$1.match(/Chrome\/(\d+)/)) && (version = +match[1]);
+
+var environmentV8Version = version, V8_VERSION = environmentV8Version, fails$5 = fails$9, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5((function() {
+    var symbol = Symbol("symbol detection");
+    // Chrome 38 Symbol has incorrect toString conversion
+    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
+    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
+    // of course, fail.
+        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
+    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
+    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
+})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$2 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
+    return "symbol" == typeof it;
+} : function(it) {
+    var $Symbol = function(namespace, method) {
+        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$b[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$b[namespace] && globalThis$b[namespace][method];
+    }("Symbol");
+    return isCallable$5($Symbol) && isPrototypeOf$2($Symbol.prototype, $Object$2(it));
+}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$6 = TypeError, aCallable$3 = function(argument) {
+    if (isCallable$4(argument)) return argument;
+    throw new $TypeError$6(function(argument) {
+        try {
+            return $String$2(argument);
+        } catch (error) {
+            return "Object";
+        }
+    }(argument) + " is not a function");
+}, aCallable$2 = aCallable$3, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$5 = isObject$6, $TypeError$5 = TypeError, sharedStore = {
+    exports: {}
+}, globalThis$7 = globalThis_1, defineProperty = Object.defineProperty, globalThis$6 = globalThis_1, store$1 = sharedStore.exports = globalThis$6["__core-js_shared__"] || function(key, value) {
+    try {
+        defineProperty(globalThis$7, key, {
+            value: value,
+            configurable: !0,
+            writable: !0
+        });
+    } catch (error) {
+        globalThis$7[key] = value;
+    }
+    return value;
+}("__core-js_shared__", {});
+
+/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
+    version: "3.43.0",
+    mode: "pure",
+    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
+    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
+    source: "https://github.com/zloirock/core-js"
+});
+
+var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, toObject$2 = function(argument) {
+    return $Object$1(requireObjectCoercible$1(argument));
+}, toObject$1 = toObject$2, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
+    return hasOwnProperty(toObject$1(it), key);
+}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
+    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
+}, wellKnownSymbol$5 = function(name) {
+    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
+    WellKnownSymbolsStore[name];
+}, call$1 = functionCall, isObject$4 = isObject$6, isSymbol$1 = isSymbol$2, $TypeError$4 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
+    if (!isObject$4(input) || isSymbol$1(input)) return input;
+    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$2(func));
+    if (exoticToPrim) {
+        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
+        !isObject$4(result) || isSymbol$1(result)) return result;
+        throw new $TypeError$4("Can't convert object to primitive value");
+    }
+    return void 0 === pref && (pref = "number"), function(input, pref) {
+        var fn, val;
+        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$5(val = call$2(fn, input))) return val;
+        if (isCallable$3(fn = input.valueOf) && !isObject$5(val = call$2(fn, input))) return val;
+        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$5(val = call$2(fn, input))) return val;
+        throw new $TypeError$5("Can't convert object to primitive value");
+    }(input, pref);
+}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
+    var key = toPrimitive(argument, "string");
+    return isSymbol(key) ? key : key + "";
+}, isObject$3 = isObject$6, document$1 = globalThis_1.document, EXISTS = isObject$3(document$1) && isObject$3(document$1.createElement), ie8DomDefine = !descriptors && !fails$9((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
+        get: function() {
+            return 7;
+        }
+    }).a;
+    var it;
+})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+
+// `Object.getOwnPropertyDescriptor` method
+// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
+objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
+    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
+        return $getOwnPropertyDescriptor$1(O, P);
+    } catch (error) {/* empty */}
+    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
+};
+
+var fails$3 = fails$9, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
+    var value = data[normalize(feature)];
+    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$3(detection) : !!detection);
+}, normalize = isForced$1.normalize = function(string) {
+    return String(string).replace(replacement, ".").toLowerCase();
+}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable$1 = aCallable$3, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$9((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
+        value: 42,
+        writable: !1
+    }).prototype;
+})), isObject$2 = isObject$6, $String$1 = String, $TypeError$3 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
+    if (isObject$2(argument)) return argument;
+    throw new $TypeError$3($String$1(argument) + " is not an object");
+}, toPropertyKey = toPropertyKey$2, $TypeError$2 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+
+// `Object.defineProperty` method
+// https://tc39.es/ecma262/#sec-object.defineproperty
+objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
+        var current = $getOwnPropertyDescriptor(O, P);
+        current && current.writable && (O[P] = Attributes.value, Attributes = {
+            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
+            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
+            writable: !1
+        });
+    }
+    return $defineProperty(O, P, Attributes);
+} : $defineProperty : function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
+        return $defineProperty(O, P, Attributes);
+    } catch (error) {/* empty */}
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$2("Accessors not supported");
+    return "value" in Attributes && (O[P] = Attributes.value), O;
+};
+
+var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
+    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
+} : function(object, key, value) {
+    return object[key] = value, object;
+}, globalThis$3 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+    return aCallable$1(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
+        return fn.apply(that, arguments);
+    };
+}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
+    var Wrapper = function(a, b, c) {
+        if (this instanceof Wrapper) {
+            switch (arguments.length) {
+              case 0:
+                return new NativeConstructor;
+
+              case 1:
+                return new NativeConstructor(a);
+
+              case 2:
+                return new NativeConstructor(a, b);
+            }
+            return new NativeConstructor(a, b, c);
+        }
+        return apply(NativeConstructor, this, arguments);
+    };
+    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$3 : STATIC ? globalThis$3[TARGET] : globalThis$3[TARGET] && globalThis$3[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$3) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
+}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
+    var n = +x;
+    return (n > 0 ? floor : ceil)(n);
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, lengthOfArrayLike$2 = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
+    var argument, len;
+}, toIndexedObject = toIndexedObject$2, lengthOfArrayLike$1 = lengthOfArrayLike$2, createMethod$1 = function(IS_INCLUDES) {
+    return function($this, el, fromIndex) {
+        var O = toIndexedObject($this), length = lengthOfArrayLike$1(O);
+        if (0 === length) return !IS_INCLUDES && -1;
+        var value, index = function(index, length) {
+            var integer = toIntegerOrInfinity$1(index);
+            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
+        }(fromIndex, length);
+        // Array#includes uses SameValueZero equality algorithm
+        // eslint-disable-next-line no-self-compare -- NaN check
+        if (IS_INCLUDES && el != el) {
+            for (;length > index; ) 
+            // eslint-disable-next-line no-self-compare -- NaN check
+            if ((value = O[index++]) != value) return !0;
+            // Array#indexOf ignores holes, Array#includes - not
+                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
+        return !IS_INCLUDES && -1;
+    };
+}, $includes = [ createMethod$1(!0), createMethod$1(!1) ][0];
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+_export({
+    target: "Array",
+    proto: !0,
+    forced: fails$9((function() {
+        // eslint-disable-next-line es/no-array-prototype-includes -- detection
+        return !Array(1).includes();
+    }))
+}, {
+    includes: function(el /* , fromIndex = 0 */) {
+        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var globalThis$2 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$3 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
+    if (pureMethod) return pureMethod;
+    var NativeConstructor = globalThis$2[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+}, includes$4 = getBuiltInPrototypeMethod$3("Array", "includes"), isObject$1 = isObject$6, classof$3 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError$1 = TypeError, test = {};
+
+test[wellKnownSymbol$5("toStringTag")] = "z";
+
+var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
+    return arguments;
+}()), classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+    var O, tag, result;
+    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
+        try {
+            return it[key];
+        } catch (error) {/* empty */}
+    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
+}, $String = String, MATCH = wellKnownSymbol$5("match"), $$1 = _export, notARegExp = function(it) {
+    if (function(it) {
+        var isRegExp;
+        return isObject$1(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$3(it));
+    }(it)) throw new $TypeError$1("The method doesn't accept regular expressions");
+    return it;
+}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
+    if ("Symbol" === classof$1(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
+    return $String(argument);
+}, stringIndexOf = functionUncurryThis("".indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$$1({
+    target: "String",
+    proto: !0,
+    forced: !function(METHOD_NAME) {
+        var regexp = /./;
+        try {
+            "/./"[METHOD_NAME](regexp);
+        } catch (error1) {
+            try {
+                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
+            } catch (error2) {/* empty */}
+        }
+        return !1;
+    }("includes")
+}, {
+    includes: function(searchString /* , position = 0 */) {
+        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeOf$1 = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype$1 = Array.prototype, StringPrototype = String.prototype;
+
+const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.includes;
+    return it === ArrayPrototype$1 || isPrototypeOf$1(ArrayPrototype$1, it) && own === ArrayPrototype$1.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf$1(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
+})), Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, oneLine: oneLine = !1, toast: toast = !1, glass: glass, className: className, style: style, ...props}) => {
     const {generateCalloutClass: generateCalloutClass, handleClose: handleClose} = 
     /**
  * Callout state and functionality
@@ -3807,10 +4176,10 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
             ...initialProps
         };
         /**
-     * Generate callout class based on properties
-     * @param props - Callout properties
-     * @returns Class string
-     */        return {
+   * Generate callout class based on properties
+   * @param props - Callout properties
+   * @returns Class string
+   */        return {
             defaultProps: defaultProps,
             generateCalloutClass: props => {
                 const {variant: variant = defaultProps.variant, oneLine: oneLine = defaultProps.oneLine, toast: toast = defaultProps.toast, glass: glass = defaultProps.glass, className: className = ""} = props;
@@ -3820,7 +4189,10 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
                 handler && handler();
             }
         };
-    }({
+    }
+    /**
+ * Callout component for displaying important messages, notifications, or alerts
+ */ ({
         variant: variant,
         oneLine: oneLine,
         toast: toast,
@@ -3828,12 +4200,13 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
         className: className,
         style: style
     }), getAriaAttributes = () => {
+        var _context, _context2;
         const baseAttributes = {
             role: "region"
         };
         // For toast notifications or alerts, use appropriate role and live region
-                return toast ? (baseAttributes.role = "alert", baseAttributes["aria-live"] = "polite") : [ "warning", "error" ].includes(variant) ? (baseAttributes.role = "alert", 
-        baseAttributes["aria-live"] = "assertive") : [ "info", "success" ].includes(variant) && (baseAttributes.role = "status", 
+                return toast ? (baseAttributes.role = "alert", baseAttributes["aria-live"] = "polite") : _includesInstanceProperty(_context = [ "warning", "error" ]).call(_context, variant) ? (baseAttributes.role = "alert", 
+        baseAttributes["aria-live"] = "assertive") : _includesInstanceProperty(_context2 = [ "info", "success" ]).call(_context2, variant) && (baseAttributes.role = "status", 
         baseAttributes["aria-live"] = "polite"), baseAttributes;
     }, calloutContent = jsxs(Fragment, {
         children: [ jsxs("div", {
@@ -3915,7 +4288,7 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
 
 Callout.displayName = "Callout";
 
-const Card = React.memo(forwardRef((({
+const Card =  React.memo( forwardRef((({
 // Variants
 size: size = "md", variant: variant = "", appearance: appearance = "filled", elevation: elevation = "none", hoverable: hoverable = !1, hoverElevation: hoverElevation = "md", 
 // Layout
@@ -4038,7 +4411,7 @@ className: className = "", style: style, ...rest}, ref) => {
 
 Card.displayName = "Card";
 
-const CardHeader = forwardRef((({title: title, subtitle: subtitle, action: action, icon: icon, children: children, className: className = "", ...props}, ref) => {
+const CardHeader =  forwardRef((({title: title, subtitle: subtitle, action: action, icon: icon, children: children, className: className = "", ...props}, ref) => {
     const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
     return jsxs("div", {
         ref: ref,
@@ -4064,7 +4437,7 @@ const CardHeader = forwardRef((({title: title, subtitle: subtitle, action: actio
 
 CardHeader.displayName = "CardHeader";
 
-const CardBody = forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight, children: children, className: className = "", style: style, ...props}, ref) => {
+const CardBody =  forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight, children: children, className: className = "", style: style, ...props}, ref) => {
     const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? "c-card__body--scrollable" : ""} ${className}`.trim(), bodyStyle = {
         ...style,
         ...scrollable && maxHeight ? {
@@ -4083,7 +4456,7 @@ const CardBody = forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight
 
 CardBody.displayName = "CardBody";
 
-const CardFooter = forwardRef((({align: align, children: children, className: className = "", style: style, ...props}, ref) => {
+const CardFooter =  forwardRef((({align: align, children: children, className: className = "", style: style, ...props}, ref) => {
     const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ""} ${className}`.trim();
     return jsx("div", {
         ref: ref,
@@ -4175,12 +4548,67 @@ const useCard = (options = {}) => {
     });
 };
 
+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;
+
+const _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
  * @returns Chart state and methods
- */
-function useChart(initialProps) {
+ */ function useChart(initialProps) {
     const [interactionState, setInteractionState] = useState({
         hoveredPoint: null,
         selectedPoints: [],
@@ -4216,8 +4644,8 @@ function useChart(initialProps) {
         animationFrameRef.current && cancelAnimationFrame(animationFrameRef.current);
     }), []);
     /**
-     * Point interaction handlers
-     */
+   * Point interaction handlers
+   */
     const handlePointHover = useCallback(((datasetIndex, pointIndex, x, y, clientX, clientY) => {
         setInteractionState((prev => ({
             ...prev,
@@ -4571,9 +4999,7 @@ function useChart(initialProps) {
 
 /**
  * Hook for chart data processing and transformation
- */ ElevationCard.displayName = "ElevationCard";
-
-const ChartToolbar = memo(forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
+ */ const ChartToolbar =  memo( forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
     refresh: !0,
     export: !0,
     fullscreen: !0,
@@ -4960,7 +5386,7 @@ const ChartToolbar = memo(forwardRef((({chartType: chartType = "line", groups: g
 
 ChartToolbar.displayName = "ChartToolbar";
 
-const ChartContext = createContext(null), Chart = memo(forwardRef((({children: children, type: type = "line", size: size = "md", variant: variant = "primary", title: title, subtitle: subtitle, loading: loading = !1, error: error, className: className = "", "aria-label": ariaLabel, onFullscreen: onFullscreen, onExport: onExport, onRefresh: onRefresh, showToolbar: showToolbar = !1, enableFullscreen: enableFullscreen = !1, enableExport: enableExport = !1, enableRefresh: enableRefresh = !1, exportFormats: exportFormats = [ "png", "svg", "csv" ], datasets: datasets, config: config, 
+const ChartContext =  createContext(null), Chart =  memo( forwardRef((({children: children, type: type = "line", size: size = "md", variant: variant = "primary", title: title, subtitle: subtitle, loading: loading = !1, error: error, className: className = "", "aria-label": ariaLabel, onFullscreen: onFullscreen, onExport: onExport, onRefresh: onRefresh, showToolbar: showToolbar = !1, enableFullscreen: enableFullscreen = !1, enableExport: enableExport = !1, enableRefresh: enableRefresh = !1, exportFormats: exportFormats = [ "png", "svg", "csv" ], datasets: datasets, config: config, 
 // Destructure non-DOM props to prevent passing to DOM element
 toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, customToolbarGroups: customToolbarGroups, data: data, showLegend: showLegend, interactive: interactive, fullscreen: fullscreen, onDataPointClick: onDataPointClick, onLegendItemClick: onLegendItemClick, glass: glass, ...props}, ref) => {
     const [isFullscreen, setIsFullscreen] = useState(!1), [isExporting, setIsExporting] = useState(!1), chartContainerRef = useRef(null), [zoomLevel, setZoomLevel] = useState(1), [panOffset, setPanOffset] = useState({
@@ -5579,7 +6005,7 @@ Chart.displayName = "Chart";
 /**
  * Enhanced chart renderer component with comprehensive functionality
  */
-const ChartRenderer = memo(forwardRef((({datasets: datasets = [], config: config, width: width = CHART.DEFAULT_WIDTH, height: height = CHART.DEFAULT_HEIGHT, onDataPointClick: onDataPointClick, interactive: interactive = !0, enableRealTime: enableRealTime = !1, enableAccessibility: enableAccessibility = !0, enablePerformanceOptimization: enablePerformanceOptimization = !0, renderContent: renderContent}, ref) => {
+const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: config, width: width = CHART.DEFAULT_WIDTH, height: height = CHART.DEFAULT_HEIGHT, onDataPointClick: onDataPointClick, interactive: interactive = !0, enableRealTime: enableRealTime = !1, enableAccessibility: enableAccessibility = !0, enablePerformanceOptimization: enablePerformanceOptimization = !0, renderContent: renderContent}, ref) => {
     // Get chart context (zoom/pan state from toolbar) - optional
     // Always call useContext to maintain consistent hook order
     const chartContext = useContext(ChartContext), {calculateScales: calculateScales, getChartColors: getChartColors} = useChart(), {processedData: processedData, isProcessing: isProcessing} = function(datasets, options) {
@@ -5595,14 +6021,15 @@ const ChartRenderer = memo(forwardRef((({datasets: datasets = [], config: config
         }), [ enableDecimation ]), calculateMovingAverage = useCallback(((values, period) => {
             const result = [];
             for (let i = 0; i < values.length; i++) if (i < period - 1) result.push(null); else {
-                const sum = values.slice(i - period + 1, i + 1).reduce(((a, b) => a + b), 0);
+                var _context;
+                const sum = _reduceInstanceProperty(_context = values.slice(i - period + 1, i + 1)).call(_context, ((a, b) => a + b), 0);
                 result.push(sum / period);
             }
             return result;
         }), []), calculateTrendLine = useCallback((values => {
             const n = values.length;
             if (n < 2) return values.map((() => null));
-            const xSum = values.reduce(((sum, _, i) => sum + i), 0), ySum = values.reduce(((sum, val) => sum + val), 0), slope = (n * values.reduce(((sum, val, i) => sum + i * val), 0) - xSum * ySum) / (n * values.reduce(((sum, _, i) => sum + i * i), 0) - xSum * xSum), intercept = (ySum - slope * xSum) / n;
+            const xSum = _reduceInstanceProperty(values).call(values, ((sum, _, i) => sum + i), 0), ySum = _reduceInstanceProperty(values).call(values, ((sum, val) => sum + val), 0), slope = (n * _reduceInstanceProperty(values).call(values, ((sum, val, i) => sum + i * val), 0) - xSum * ySum) / (n * _reduceInstanceProperty(values).call(values, ((sum, _, i) => sum + i * i), 0) - xSum * xSum), intercept = (ySum - slope * xSum) / n;
             return values.map(((_, i) => slope * i + intercept));
         }), []);
         // Process data when datasets change
@@ -5739,7 +6166,7 @@ const ChartRenderer = memo(forwardRef((({datasets: datasets = [], config: config
         // Announce data changes
         useEffect((() => {
             if (!announceDataChanges || !datasets.length) return;
-            const totalDataPoints = datasets.reduce(((sum, dataset) => sum + (dataset.data?.length || 0)), 0);
+            const totalDataPoints = _reduceInstanceProperty(datasets).call(datasets, ((sum, dataset) => sum + (dataset.data?.length || 0)), 0);
             announceData(`Chart updated with ${datasets.length} datasets and ${totalDataPoints} data points`);
         }), [ datasets, announceDataChanges, announceData ]);
         // Generate accessible description
@@ -6018,7 +6445,7 @@ const ChartRenderer = memo(forwardRef((({datasets: datasets = [], config: config
 
 ChartRenderer.displayName = "ChartRenderer";
 
-const BaseChart = memo(forwardRef((({type: type, datasets: datasets = [], config: config = {}, renderContent: renderContent, interactive: interactive = !0, enableRealTime: enableRealTime = !1, enableAccessibility: enableAccessibility = !0, enablePerformanceOptimization: enablePerformanceOptimization = !0, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const BaseChart =  memo( forwardRef((({type: type, datasets: datasets = [], config: config = {}, renderContent: renderContent, interactive: interactive = !0, enableRealTime: enableRealTime = !1, enableAccessibility: enableAccessibility = !0, enablePerformanceOptimization: enablePerformanceOptimization = !0, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const renderChartContent = useCallback((params => renderContent(params)), [ renderContent ]);
     return jsx(Chart, {
         ref: ref,
@@ -6041,81 +6468,89 @@ const BaseChart = memo(forwardRef((({type: type, datasets: datasets = [], config
 
 BaseChart.displayName = "BaseChart";
 
-const AnimatedChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, chartType: chartType = "line", particleEffects: particleEffects, onDataPointClick: onDataPointClick, ...props}, ref) => {
-    const animationRef = useRef(0), timeRef = useRef(0), particlesRef = useRef([]), renderContent = useCallback((({scales: scales, colors: colors, datasets: chartDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
-        if (
-        // Animation time tracking
-        useEffect((() => {
-            const animateFrame = timestamp => {
-                timeRef.current = timestamp, animationRef.current = requestAnimationFrame(animateFrame);
-            };
-            return animationRef.current = requestAnimationFrame(animateFrame), () => {
-                animationRef.current && cancelAnimationFrame(animationRef.current);
-            };
-        }), []), !chartDatasets.length) return null;
+const AnimatedChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, chartType: chartType = "line", particleEffects: particleEffects, onDataPointClick: onDataPointClick, ...props}, ref) => {
+    const animationRef = useRef(0), timeRef = useRef(0), particlesRef = useRef([]);
+    // Animation time tracking - moved outside callback
+    useEffect((() => {
+        const animateFrame = timestamp => {
+            timeRef.current = timestamp, animationRef.current = requestAnimationFrame(animateFrame);
+        };
+        return animationRef.current = requestAnimationFrame(animateFrame), () => {
+            animationRef.current && cancelAnimationFrame(animationRef.current);
+        };
+    }), []);
+    const renderContent = useCallback((({scales: scales, colors: colors, datasets: chartDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
+        if (!chartDatasets.length) return null;
         const chartWidth = scales.width - 80, chartHeight = scales.height - 80, elements = [];
         // Particle effects
         if (chartDatasets.forEach(((dataset, datasetIndex) => {
             const color = dataset.color || colors[datasetIndex % colors.length];
-            if ("bar" === chartType) 
-            // Create animated bars
-            dataset.data.forEach(((point, pointIndex) => {
-                const barWidth = chartWidth / dataset.data.length * .8, x = 40 + pointIndex * (chartWidth / dataset.data.length) + (chartWidth / dataset.data.length - barWidth) / 2, height = point.value / 100 * chartHeight, y = 40 + chartHeight - height;
-                elements.push(jsx("rect", {
-                    x: x,
-                    y: y,
-                    width: barWidth,
-                    height: height,
-                    fill: color,
-                    style: {
-                        transform: `scaleY(${.1 * Math.sin(.01 * timeRef.current + .2 * pointIndex) + .9})`,
-                        transformOrigin: "bottom"
-                    },
-                    onClick: () => handlers.onDataPointClick?.(point, datasetIndex, pointIndex)
-                }, `bar-${datasetIndex}-${pointIndex}`));
-            })); else {
-                // Create animated line/area
-                const points = dataset.data.map(((point, pointIndex) => ({
-                    x: 40 + pointIndex / (dataset.data.length - 1) * chartWidth,
-                    y: 40 + chartHeight - point.value / 100 * chartHeight
-                })));
-                if (points.length > 0) {
-                    const linePath = `M ${points.map((p => `${p.x},${p.y}`)).join(" L ")}`;
-                    // Area for area chart
-                                        if ("area" === chartType) {
-                        const areaPath = `${linePath} L ${40 + chartWidth},${40 + chartHeight} L 40,${40 + chartHeight} Z`;
-                        elements.push(jsx("path", {
-                            d: areaPath,
-                            fill: color,
-                            fillOpacity: "0.3",
+            switch (chartType) {
+              case "bar":
+                // Create animated bars
+                dataset.data.forEach(((point, pointIndex) => {
+                    const barWidth = chartWidth / dataset.data.length * .8, x = 40 + pointIndex * (chartWidth / dataset.data.length) + (chartWidth / dataset.data.length - barWidth) / 2, height = point.value / 100 * chartHeight, y = 40 + chartHeight - height;
+                    elements.push(jsx("rect", {
+                        x: x,
+                        y: y,
+                        width: barWidth,
+                        height: height,
+                        fill: color,
+                        style: {
+                            transform: `scaleY(${.1 * Math.sin(.01 * timeRef.current + .2 * pointIndex) + .9})`,
+                            transformOrigin: "bottom"
+                        },
+                        onClick: () => handlers.onDataPointClick?.(point, datasetIndex, pointIndex)
+                    }, `bar-${datasetIndex}-${pointIndex}`));
+                }));
+                break;
+
+              default:
+                {
+                    // Create animated line/area
+                    const points = dataset.data.map(((point, pointIndex) => ({
+                        x: 40 + pointIndex / (dataset.data.length - 1) * chartWidth,
+                        y: 40 + chartHeight - point.value / 100 * chartHeight
+                    })));
+                    if (points.length > 0) {
+                        const linePath = `M ${points.map((p => `${p.x},${p.y}`)).join(" L ")}`;
+                        // Area for area chart
+                                                if ("area" === chartType) {
+                            const areaPath = `${linePath} L ${40 + chartWidth},${40 + chartHeight} L 40,${40 + chartHeight} Z`;
+                            elements.push(jsx("path", {
+                                d: areaPath,
+                                fill: color,
+                                fillOpacity: "0.3",
+                                style: {
+                                    transform: `translateY(${2 * Math.sin(.01 * timeRef.current)}px)`
+                                }
+                            }, `area-${datasetIndex}`));
+                        }
+                        // Line
+                                                elements.push(jsx("path", {
+                            d: linePath,
+                            stroke: color,
+                            fill: "none",
+                            className: "c-chart__data-line",
                             style: {
                                 transform: `translateY(${2 * Math.sin(.01 * timeRef.current)}px)`
                             }
-                        }, `area-${datasetIndex}`));
+                        }, `line-${datasetIndex}`)), 
+                        // Data points
+                        points.forEach(((point, pointIndex) => {
+                            elements.push(jsx("circle", {
+                                cx: point.x,
+                                cy: point.y,
+                                r: "4",
+                                fill: color,
+                                style: {
+                                    transform: `scale(${1 + .2 * Math.sin(.01 * timeRef.current + pointIndex)})`
+                                },
+                                onClick: () => handlers.onDataPointClick?.(dataset.data[pointIndex], datasetIndex, pointIndex)
+                            }, `point-${datasetIndex}-${pointIndex}`));
+                        }));
                     }
-                    // Line
-                                        elements.push(jsx("path", {
-                        d: linePath,
-                        stroke: color,
-                        fill: "none",
-                        className: "c-chart__data-line",
-                        style: {
-                            transform: `translateY(${2 * Math.sin(.01 * timeRef.current)}px)`
-                        }
-                    }, `line-${datasetIndex}`)), 
-                    // Data points
-                    points.forEach(((point, pointIndex) => {
-                        elements.push(jsx("circle", {
-                            cx: point.x,
-                            cy: point.y,
-                            r: "4",
-                            fill: color,
-                            style: {
-                                transform: `scale(${1 + .2 * Math.sin(.01 * timeRef.current + pointIndex)})`
-                            },
-                            onClick: () => handlers.onDataPointClick?.(dataset.data[pointIndex], datasetIndex, pointIndex)
-                        }, `point-${datasetIndex}-${pointIndex}`));
-                    }));
+                    break;
                 }
             }
         })), particleEffects?.enabled) for (let i = 0; i < particleEffects.count; i++) {
@@ -6136,7 +6571,7 @@ const AnimatedChart = memo(forwardRef((({datasets: datasets = [], config: config
     }), [ chartType, particleEffects ]);
     return jsx(BaseChart, {
         ref: ref,
-        type: "animated",
+        type: "line",
         datasets: datasets,
         config: config,
         renderContent: renderContent,
@@ -6147,7 +6582,7 @@ const AnimatedChart = memo(forwardRef((({datasets: datasets = [], config: config
 
 AnimatedChart.displayName = "AnimatedChart";
 
-const ChartTooltip = memo((({dataPoint: dataPoint, datasetLabel: datasetLabel, datasetColor: datasetColor, position: position, visible: visible, customRenderer: customRenderer}) => {
+const ChartTooltip =  memo((({dataPoint: dataPoint, datasetLabel: datasetLabel, datasetColor: datasetColor, position: position, visible: visible, customRenderer: customRenderer}) => {
     const tooltipRef = useRef(null), [adjustedPosition, setAdjustedPosition] = useState(position);
     // Dynamic positioning to keep tooltip in viewport
     return useEffect((() => {
@@ -6164,7 +6599,7 @@ const ChartTooltip = memo((({dataPoint: dataPoint, datasetLabel: datasetLabel, d
             x: newX,
             y: newY
         });
-    }), [ position, visible ]), visible && dataPoint ? createPortal(jsx("div", {
+    }), [ position, visible ]), visible && dataPoint ?  createPortal(jsx("div", {
         ref: tooltipRef,
         className: "c-chart__tooltip",
         style: {
@@ -6218,7 +6653,7 @@ const ChartTooltip = memo((({dataPoint: dataPoint, datasetLabel: datasetLabel, d
 
 ChartTooltip.displayName = "ChartTooltip";
 
-const AreaChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, areaOptions: areaOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const AreaChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, areaOptions: areaOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     // Area chart is essentially a line chart with area fill enabled
     const enhancedAreaOptions = {
         showArea: !0,
@@ -6273,7 +6708,11 @@ const AreaChart = memo(forwardRef((({datasets: datasets = [], config: config = {
                         })) ]
                     }, `dataset-${datasetIndex}`);
                 })), showTooltips && hoveredPoint && jsx(ChartTooltip, {
-                    dataPoint: renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex],
+                    dataPoint: renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] ?? {
+                        label: "",
+                        value: 0,
+                        color: ""
+                    },
                     datasetLabel: renderedDatasets[hoveredPoint.datasetIndex]?.label,
                     datasetColor: renderedDatasets[hoveredPoint.datasetIndex]?.color || colors[hoveredPoint.datasetIndex],
                     position: {
@@ -6422,7 +6861,7 @@ function useBarChart(datasets, options = {}) {
 
 AreaChart.displayName = "AreaChart";
 
-const BarChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, barOptions: barOptions = {}, horizontal: horizontal = !1, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const BarChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, barOptions: barOptions = {}, horizontal: horizontal = !1, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const {calculateBarDimensions: calculateBarDimensions, handleBarHover: handleBarHover, handleBarLeave: handleBarLeave, hoveredBar: hoveredBar, formatValue: formatValue} = useBarChart(0, barOptions);
     return jsx(BaseChart, {
         ref: ref,
@@ -6435,7 +6874,9 @@ const BarChart = memo(forwardRef((({datasets: datasets = [], config: config = {}
                         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, barDimensions = calculateBarDimensions(renderedDatasets, scales.width, scales.height, scales.padding, horizontal);
             return jsxs(Fragment, {
                 children: [ barDimensions.map(((bar, index) => {
-                    const dataset = renderedDatasets[bar.datasetIndex], point = dataset.data?.[bar.pointIndex], color = dataset.color || colors[bar.datasetIndex], isHovered = hoveredPoint?.datasetIndex === bar.datasetIndex && hoveredPoint?.pointIndex === bar.pointIndex;
+                    const dataset = renderedDatasets[bar.datasetIndex];
+                    if (!dataset) return null;
+                    const point = dataset.data?.[bar.pointIndex], color = dataset.color || colors[bar.datasetIndex], isHovered = hoveredPoint?.datasetIndex === bar.datasetIndex && hoveredPoint?.pointIndex === bar.pointIndex;
                     return jsxs("g", {
                         children: [ jsx("rect", {
                             x: bar.x,
@@ -6477,7 +6918,7 @@ const BarChart = memo(forwardRef((({datasets: datasets = [], config: config = {}
 
 BarChart.displayName = "BarChart";
 
-const BubbleChart = memo(forwardRef((({bubbleData: bubbleData = [], config: config = {}, bubbleOptions: bubbleOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const BubbleChart =  memo( forwardRef((({bubbleData: bubbleData = [], config: config = {}, bubbleOptions: bubbleOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const {minBubbleSize: minBubbleSize = 5, maxBubbleSize: maxBubbleSize = 50, bubbleOpacity: bubbleOpacity = .7, showLabels: showLabels = !0, labelPosition: labelPosition = "center", enableAnimations: enableAnimations = !0, animationDuration: animationDuration = 1e3, showSizeLegend: showSizeLegend = !0, sizeLegendTitle: sizeLegendTitle = "Size", colorScheme: colorScheme = [ "var(--atomix-primary)", "var(--atomix-secondary)", "var(--atomix-success)", "var(--atomix-warning)", "var(--atomix-error)", "var(--atomix-info)" ], sizeBasedColoring: sizeBasedColoring = !1} = bubbleOptions;
     return jsx(BaseChart, {
         ref: ref,
@@ -6532,7 +6973,7 @@ const BubbleChart = memo(forwardRef((({bubbleData: bubbleData = [], config: conf
             }));
             // Calculate bubble sizes based on data
                         return jsxs(Fragment, {
-                children: [ bubbles, showTooltips && hoveredPoint && hoveredPoint.pointIndex < bubbleData.length && jsx(ChartTooltip, {
+                children: [ bubbles, showTooltips && hoveredPoint && hoveredPoint.pointIndex < bubbleData.length && bubbleData[hoveredPoint.pointIndex] && jsx(ChartTooltip, {
                     dataPoint: bubbleData[hoveredPoint.pointIndex],
                     datasetLabel: "Bubbles",
                     datasetColor: bubbleData[hoveredPoint.pointIndex]?.color || colorScheme[hoveredPoint.pointIndex % colorScheme.length],
@@ -6551,7 +6992,7 @@ const BubbleChart = memo(forwardRef((({bubbleData: bubbleData = [], config: conf
 
 BubbleChart.displayName = "BubbleChart";
 
-const CandlestickChart = memo(forwardRef((({candlestickData: candlestickData = [], config: config = {}, candlestickOptions: candlestickOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const CandlestickChart =  memo( forwardRef((({candlestickData: candlestickData = [], config: config = {}, candlestickOptions: candlestickOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const {showVolume: showVolume = !0, volumeHeightRatio: volumeHeightRatio = .2, upColor: upColor = "var(--atomix-success-bg-subtle)", downColor: downColor = "var(--atomix-error-bg-subtle)", wickColor: wickColor = "var(--atomix-brand-border-subtle)", borderColor: borderColor = "var(--atomix-primary-border-subtle)", showMovingAverages: showMovingAverages = !1, movingAveragePeriods: movingAveragePeriods = [ 7, 21 ], movingAverageColors: movingAverageColors = [ "var(--atomix-warning-bg-subtle)", "var(--atomix-warning-border-subtle)" ], dateFormat: dateFormat = "short", dateFormatter: dateFormatter, showGrid: showGrid = !0, gridColor: gridColor = "var(--atomix-brand-text-emphasis)", showTooltips: showTooltips = !0} = candlestickOptions;
     // Calculate moving averages
         return jsx(BaseChart, {
@@ -6658,11 +7099,12 @@ const CandlestickChart = memo(forwardRef((({candlestickData: candlestickData = [
                 const movingAverage = ((data, period) => {
                     const result = [];
                     for (let i = 0; i < data.length; i++) {
+                        var _context;
                         if (i < period - 1) {
                             result.push(NaN);
                             continue;
                         }
-                        const sum = data.slice(i - period + 1, i + 1).reduce(((acc, item) => acc + item.close), 0);
+                        const sum = _reduceInstanceProperty(_context = data.slice(i - period + 1, i + 1)).call(_context, ((acc, item) => acc + item.close), 0);
                         result.push(sum / period);
                     }
                     return result;
@@ -6699,7 +7141,7 @@ const CandlestickChart = memo(forwardRef((({candlestickData: candlestickData = [
 
 CandlestickChart.displayName = "CandlestickChart";
 
-const DonutChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, pieOptions: pieOptions = {
+const DonutChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, pieOptions: pieOptions = {
     showValues: !1,
     showPercentages: !0,
     showLabels: !1,
@@ -6732,9 +7174,10 @@ const DonutChart = memo(forwardRef((({datasets: datasets = [], config: config =
         datasets: datasets,
         config: config,
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
+            var _context;
             if (!chartData) return null;
             // Use actual container dimensions from scales
-                        const width = scales.width, height = scales.height, outerRadius = Math.min(width, height) / 2 * .8, innerRadius = outerRadius * (donutOptions.innerRadiusRatio ?? .6), centerX = width / 2, centerY = height / 2, defaultColors = [ "var(--atomix-primary-2)", "var(--atomix-primary-3)", "var(--atomix-primary-4)", "var(--atomix-primary-5)", "var(--atomix-primary-6)", "var(--atomix-primary-7)", "var(--atomix-primary-8)", "var(--atomix-primary-9)" ], chartColors = dataset?.color ? [ dataset.color ] : dataset?.data?.map(((_, i) => defaultColors[i % defaultColors.length])) || defaultColors, total = chartData.validDataPoints.reduce(((sum, point) => sum + point.value), 0), padAngleRad = (pieOptions.padAngle || 1) * Math.PI / 180;
+                        const width = scales.width, height = scales.height, outerRadius = Math.min(width, height) / 2 * .8, innerRadius = outerRadius * (donutOptions.innerRadiusRatio ?? .6), centerX = width / 2, centerY = height / 2, defaultColors = [ "var(--atomix-primary-2)", "var(--atomix-primary-3)", "var(--atomix-primary-4)", "var(--atomix-primary-5)", "var(--atomix-primary-6)", "var(--atomix-primary-7)", "var(--atomix-primary-8)", "var(--atomix-primary-9)" ], chartColors = dataset?.color ? [ dataset.color ] : dataset?.data?.map(((_, i) => defaultColors[i % defaultColors.length])) || defaultColors, total = _reduceInstanceProperty(_context = chartData.validDataPoints).call(_context, ((sum, point) => sum + point.value), 0), padAngleRad = (pieOptions.padAngle || 1) * Math.PI / 180;
             let currentAngle = (pieOptions.startAngle || 0) * Math.PI / 180;
             const slices = chartData.validDataPoints.map(((point, index) => {
                 const sliceAngle = point.value / total * (2 * Math.PI) - padAngleRad, startAngle = currentAngle, endAngle = currentAngle + sliceAngle, midAngle = (startAngle + endAngle) / 2, labelRadius = .75 * outerRadius, labelX = centerX + Math.cos(midAngle) * labelRadius, labelY = centerY + Math.sin(midAngle) * labelRadius, x1 = centerX + innerRadius * Math.cos(startAngle), y1 = centerY + innerRadius * Math.sin(startAngle), x2 = centerX + outerRadius * Math.cos(startAngle), y2 = centerY + outerRadius * Math.sin(startAngle), x3 = centerX + outerRadius * Math.cos(endAngle), y3 = centerY + outerRadius * Math.sin(endAngle), x4 = centerX + innerRadius * Math.cos(endAngle), y4 = centerY + innerRadius * Math.sin(endAngle), largeArcFlag = sliceAngle > Math.PI ? 1 : 0, path = [ `M ${x1} ${y1}`, `L ${x2} ${y2}`, `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${x3} ${y3}`, `L ${x4} ${y4}`, `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x1} ${y1}`, "Z" ].join(" ");
@@ -6814,7 +7257,7 @@ const DonutChart = memo(forwardRef((({datasets: datasets = [], config: config =
 
 DonutChart.displayName = "DonutChart";
 
-const FunnelChart = memo(forwardRef((({funnelData: funnelData = [], config: config = {}, funnelOptions: funnelOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const FunnelChart =  memo( forwardRef((({funnelData: funnelData = [], config: config = {}, funnelOptions: funnelOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const {direction: direction = "vertical", showLabels: showLabels = !0, showValues: showValues = !0, showPercentages: showPercentages = !1, labelPosition: labelPosition = "outside", neckWidth: neckWidth = .3, neckHeight: neckHeight = .2, segmentGap: segmentGap = 2, colorScheme: colorScheme = [ "var(--atomix-primary)", "var(--atomix-secondary)", "var(--atomix-success)", "var(--atomix-warning)", "var(--atomix-error)", "var(--atomix-info)" ], useGradient: useGradient = !0, animate: animate = !0, animationDuration: animationDuration = 1e3, animationDelay: animationDelay = 200, valueFormatter: valueFormatter = value => value.toLocaleString(), showConversionRates: showConversionRates = !0, conversionRatePosition: conversionRatePosition = "between", proportional: proportional = !0, minSegmentRatio: minSegmentRatio = .1} = funnelOptions;
     return jsx(BaseChart, {
         ref: ref,
@@ -6923,9 +7366,11 @@ const FunnelChart = memo(forwardRef((({funnelData: funnelData = [], config: conf
 
 FunnelChart.displayName = "FunnelChart";
 
-const GaugeChart = memo(forwardRef((({value: value, min: min = 0, max: max = 100, config: config = {}, gaugeOptions: gaugeOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
-    const {startAngle: startAngle = 180, endAngle: // Default to left side (180 degrees)
-    endAngle = 0, thickness: // Default to right side (0 degrees)
+const GaugeChart =  memo( forwardRef((({value: value, min: min = 0, max: max = 100, config: config = {}, gaugeOptions: gaugeOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+    const {startAngle: startAngle = 180, endAngle: 
+    // Default to left side (180 degrees)
+    endAngle = 0, thickness: 
+    // Default to right side (0 degrees)
     thickness = .2, showNeedle: showNeedle = !0, needleColor: needleColor = "var(--atomix-brand-text-emphasis)", showValue: showValue = !0, valueFormatter: valueFormatter = val => val.toFixed(1), showMinMaxLabels: showMinMaxLabels = !0, showTicks: showTicks = !0, majorTicks: majorTicks = 5, minorTicks: minorTicks = 4, colorZones: colorZones = [], animate: animate = !0, animationDuration: animationDuration = 1e3, animationEasing: animationEasing = "easeOutCubic", useGradient: useGradient = !1, label: label = "", labelPosition: labelPosition = "bottom"} = gaugeOptions;
     return jsx(BaseChart, {
         ref: ref,
@@ -7054,7 +7499,7 @@ const colorSchemes = {
     reds: [ "var(--atomix-red-1)", "var(--atomix-red-2)", "var(--atomix-red-3)", "var(--atomix-red-4)", "var(--atomix-red-5)", "var(--atomix-red-6)", "var(--atomix-red-7)", "var(--atomix-red-8)", "var(--atomix-red-9)" ],
     greens: [ "var(--atomix-green-1)", "var(--atomix-green-2)", "var(--atomix-green-3)", "var(--atomix-green-4)", "var(--atomix-green-5)", "var(--atomix-green-6)", "var(--atomix-green-7)", "var(--atomix-green-8)", "var(--atomix-green-9)" ],
     github: [ "var(--atomix-gray-2)", "var(--atomix-green-3)", "var(--atomix-green-4)", "var(--atomix-green-5)", "var(--atomix-green-6)" ]
-}, HeatmapChart = memo(forwardRef((({data: data = [], config: config = {}, colorScale: colorScale = {
+}, HeatmapChart =  memo( forwardRef((({data: data = [], config: config = {}, colorScale: colorScale = {
     scheme: "viridis",
     steps: 9
 }, cellConfig: cellConfig = {
@@ -7249,7 +7694,8 @@ function useLineChart(datasets, options = {}) {
     }), [hoveredPoint, setHoveredPoint] = useState(null), calculateMovingAverage = useCallback(((data, period) => {
         const result = [];
         for (let i = period - 1; i < data.length; i++) {
-            const average = data.slice(i - period + 1, i + 1).reduce(((acc, point) => acc + point.value), 0) / period, dataPoint = data[i];
+            var _context;
+            const average = _reduceInstanceProperty(_context = data.slice(i - period + 1, i + 1)).call(_context, ((acc, point) => acc + point.value), 0) / period, dataPoint = data[i];
             dataPoint && result.push({
                 label: dataPoint.label,
                 value: average,
@@ -7260,7 +7706,7 @@ function useLineChart(datasets, options = {}) {
     }), []), calculateTrendLine = useCallback((data => {
         const n = data.length;
         if (n < 2) return data.map((() => null));
-        const xSum = data.reduce(((sum, _, i) => sum + i), 0), ySum = data.reduce(((sum, point) => sum + point.value), 0), slope = (n * data.reduce(((sum, point, i) => sum + i * point.value), 0) - xSum * ySum) / (n * data.reduce(((sum, _, i) => sum + i * i), 0) - xSum * xSum), intercept = (ySum - slope * xSum) / n;
+        const xSum = _reduceInstanceProperty(data).call(data, ((sum, _, i) => sum + i), 0), ySum = _reduceInstanceProperty(data).call(data, ((sum, point) => sum + point.value), 0), slope = (n * _reduceInstanceProperty(data).call(data, ((sum, point, i) => sum + i * point.value), 0) - xSum * ySum) / (n * _reduceInstanceProperty(data).call(data, ((sum, _, i) => sum + i * i), 0) - xSum * xSum), intercept = (ySum - slope * xSum) / n;
         return data.map(((point, i) => ({
             label: point.label,
             value: slope * i + intercept,
@@ -7367,7 +7813,7 @@ function useLineChart(datasets, options = {}) {
 
 HeatmapChart.displayName = "HeatmapChart";
 
-const LineChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, lineOptions: lineOptions = {}, onDataPointClick: onDataPointClick, onRealTimeUpdate: onRealTimeUpdate, onZoomChange: onZoomChange, onPanChange: onPanChange, onBrushSelection: onBrushSelection, ...props}, ref) => {
+const LineChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, lineOptions: lineOptions = {}, onDataPointClick: onDataPointClick, onRealTimeUpdate: onRealTimeUpdate, onZoomChange: onZoomChange, onPanChange: onPanChange, onBrushSelection: onBrushSelection, ...props}, ref) => {
     // Merge default options with provided options
     const mergedLineOptions = {
         showDataPoints: !0,
@@ -7467,7 +7913,7 @@ const LineChart = memo(forwardRef((({datasets: datasets = [], config: config = {
 
 LineChart.displayName = "LineChart";
 
-const MultiAxisChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, yAxes: yAxes = [], xAxes: xAxes = [], multiAxisOptions: multiAxisOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const MultiAxisChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, yAxes: yAxes = [], xAxes: xAxes = [], multiAxisOptions: multiAxisOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const {showLegend: showLegend = !0, legendPosition: legendPosition = "top", syncAxes: syncAxes = !1, axisPadding: axisPadding = 20, showTooltips: showTooltips = !0, tooltipPosition: tooltipPosition = "nearest", interpolation: interpolation = "linear", showArea: showArea = !1, areaOpacity: areaOpacity = .3, showDataPoints: showDataPoints = !0, pointRadius: pointRadius = 4, spanGaps: spanGaps = !1} = multiAxisOptions;
     return jsx(BaseChart, {
         ref: ref,
@@ -7615,7 +8061,7 @@ function usePieChart(data, options = {}) {
         return validData.length ? 
         // Sort by value if enabled
         options.sortByValue ? [ ...validData ].sort(((a, b) => b.value - a.value)) : validData : [];
-    }), [ data, options.sortByValue ]), totalValue = useMemo((() => processedData.reduce(((sum, point) => sum + point.value), 0)), [ processedData ]), slices = useMemo((() => {
+    }), [ data, options.sortByValue ]), totalValue = useMemo((() => _reduceInstanceProperty(processedData).call(processedData, ((sum, point) => sum + point.value), 0)), [ processedData ]), slices = useMemo((() => {
         if (!processedData.length || totalValue <= 0) return [];
         const innerRadius = 150 * (options.innerRadius || 0), defaultColors = [ "#7AFFD7", "#1AFFD2", "#00E6C3", "#4DFF9F", "#1AFF85", "#00E66B", "#DD6061", "#FF1A1A", "#E60000", "#FFCC00", "#E6B800", "#B38F00" ];
  // Default center
@@ -7702,7 +8148,7 @@ function usePieChart(data, options = {}) {
 
 MultiAxisChart.displayName = "MultiAxisChart";
 
-const PieChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, pieOptions: pieOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const PieChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, pieOptions: pieOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const data = datasets[0]?.data || [], {slices: slices, handleSliceHover: handleSliceHover, handleSliceLeave: handleSliceLeave, handleSliceClick: handleSliceClick, formatLabel: formatLabel, hoveredSlice: hoveredSlice, selectedSlices: selectedSlices} = usePieChart(data, pieOptions);
     return jsx(BaseChart, {
         ref: ref,
@@ -7767,7 +8213,7 @@ const PieChart = memo(forwardRef((({datasets: datasets = [], config: config = {}
 
 PieChart.displayName = "PieChart";
 
-const RadarChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, radarOptions: radarOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const RadarChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, radarOptions: radarOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const {gridLevels: gridLevels = 5, showGrid: showGrid = !0, showAxisLabels: showAxisLabels = !0, fillArea: fillArea = !0, fillOpacity: fillOpacity = .3, showDataPoints: showDataPoints = !0, pointRadius: pointRadius = 4, lineWidth: lineWidth = 2, smooth: smooth = !1, scaleType: scaleType = "linear", scaleMin: scaleMin = 0, scaleMax: scaleMax} = radarOptions;
     return jsx(BaseChart, {
         ref: ref,
@@ -7777,7 +8223,9 @@ const RadarChart = memo(forwardRef((({datasets: datasets = [], config: config =
         renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
             if (!renderedDatasets.length) return null;
             // Use toolbar state if available, fallback to config for backward compatibility
-                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, centerX = scales.width / 2, centerY = scales.height / 2, radius = .8 * Math.min(centerX, centerY), dataPoints = renderedDatasets[0].data || [], angleStep = 2 * Math.PI / dataPoints.length;
+                        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, centerX = scales.width / 2, centerY = scales.height / 2, radius = .8 * Math.min(centerX, centerY), firstDataset = renderedDatasets[0];
+            if (!firstDataset) return null;
+            const dataPoints = firstDataset.data || [], angleStep = 2 * Math.PI / dataPoints.length;
             // Calculate value bounds
             let minValue = scaleMin, maxValue = scaleMax;
             if (void 0 === minValue || void 0 === maxValue) {
@@ -7840,18 +8288,18 @@ const RadarChart = memo(forwardRef((({datasets: datasets = [], config: config =
                         point: dataset.data[i]
                     });
                 }
-                if (0 === points.length) return null;
+                if (0 === points.length || !points[0]) return null;
                 // Generate path
                                 let path = "";
                 if (smooth && points.length > 2) {
                     // For smooth curves, we would implement a more complex algorithm
                     // For now, we'll just connect the points with straight lines
                     path = `M ${points[0].x},${points[0].y}`;
-                    for (let i = 1; i < points.length; i++) path += ` L ${points[i].x},${points[i].y}`;
+                    for (let i = 1; i < points.length; i++) points[i] && (path += ` L ${points[i].x},${points[i].y}`);
                     path += ` L ${points[0].x},${points[0].y} Z`;
                 } else {
                     path = `M ${points[0].x},${points[0].y}`;
-                    for (let i = 1; i < points.length; i++) path += ` L ${points[i].x},${points[i].y}`;
+                    for (let i = 1; i < points.length; i++) points[i] && (path += ` L ${points[i].x},${points[i].y}`);
                     path += ` L ${points[0].x},${points[0].y} Z`;
                 }
                 return jsxs("g", {
@@ -7875,7 +8323,9 @@ const RadarChart = memo(forwardRef((({datasets: datasets = [], config: config =
                                 r: isHovered ? 1.5 * pointRadius : pointRadius,
                                 fill: color,
                                 className: "c-chart__radar-point " + (isHovered ? "c-chart__radar-point--hovered" : ""),
-                                onClick: () => handlers.onDataPointClick?.(point.point, datasetIndex, pointIndex),
+                                onClick: () => {
+                                    point.point && handlers.onDataPointClick?.(point.point, datasetIndex, pointIndex);
+                                },
                                 onMouseEnter: e => {
                                     const rect = e.currentTarget.getBoundingClientRect();
                                     handlers.onPointHover(datasetIndex, pointIndex, point.x, point.y, rect.left + rect.width / 2, rect.top + rect.height / 2);
@@ -7889,8 +8339,8 @@ const RadarChart = memo(forwardRef((({datasets: datasets = [], config: config =
             return jsxs(Fragment, {
                 children: [ jsxs("g", {
                     children: [ gridLines, dataPaths, axisLabels ]
-                }), showTooltips && hoveredPoint && jsx(ChartTooltip, {
-                    dataPoint: renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex],
+                }), showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && jsx(ChartTooltip, {
+                    dataPoint: renderedDatasets[hoveredPoint.datasetIndex].data[hoveredPoint.pointIndex],
                     datasetLabel: renderedDatasets[hoveredPoint.datasetIndex]?.label,
                     datasetColor: renderedDatasets[hoveredPoint.datasetIndex]?.color || colors[hoveredPoint.datasetIndex],
                     position: {
@@ -7908,7 +8358,7 @@ const RadarChart = memo(forwardRef((({datasets: datasets = [], config: config =
 
 RadarChart.displayName = "RadarChart";
 
-const ScatterChart = memo(forwardRef((({datasets: datasets = [], config: config = {}, scatterOptions: scatterOptions = {
+const ScatterChart =  memo( forwardRef((({datasets: datasets = [], config: config = {}, scatterOptions: scatterOptions = {
     pointRadius: 4,
     showLabels: !1,
     enableHoverEffects: !0
@@ -7964,8 +8414,8 @@ const ScatterChart = memo(forwardRef((({datasets: datasets = [], config: config
                 }, `point-${datasetIndex}-${pointIndex}`));
             }));
         })), jsxs(Fragment, {
-            children: [ points, showTooltips && hoveredPoint && jsx(ChartTooltip, {
-                dataPoint: renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex],
+            children: [ points, showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && jsx(ChartTooltip, {
+                dataPoint: renderedDatasets[hoveredPoint.datasetIndex].data[hoveredPoint.pointIndex],
                 datasetLabel: renderedDatasets[hoveredPoint.datasetIndex]?.label,
                 datasetColor: renderedDatasets[hoveredPoint.datasetIndex]?.color || colors[hoveredPoint.datasetIndex],
                 position: {
@@ -7982,7 +8432,7 @@ const ScatterChart = memo(forwardRef((({datasets: datasets = [], config: config
 
 ScatterChart.displayName = "ScatterChart";
 
-const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = {
+const TreemapChart =  memo( forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = {
     scheme: "category"
 }, labelConfig: labelConfig = {
     showLabels: !0,
@@ -8005,9 +8455,11 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
             processedNodes.add(node.id);
             // Find children
             const children = data.filter((item => item.parent === node.id));
+            var _context;
             return children.length > 0 && (node.children = children.map((child => buildTree(child))), 
             // For parent nodes, value is sum of children
-            node.value = node.children.reduce(((sum, child) => sum + child.value), 0)), node;
+            node.value = _reduceInstanceProperty(_context = node.children).call(_context, ((sum, child) => sum + child.value), 0)), 
+            node;
         };
         // Find root nodes
         return data.forEach((item => {
@@ -8015,7 +8467,7 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
         })), 1 === rootNodes.length ? rootNodes[0] : {
             id: "root",
             label: "Root",
-            value: rootNodes.reduce(((sum, node) => sum + node.value), 0),
+            value: _reduceInstanceProperty(rootNodes).call(rootNodes, ((sum, node) => sum + node.value), 0),
             children: rootNodes
         };
     }), [ data ]);
@@ -8029,8 +8481,10 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
             return colors[index % colors.length];
 
           case "depth":
-            const depthColors = [ "var(--atomix-blue-9)", "var(--atomix-blue-6)", "var(--atomix-blue-5)", "var(--atomix-blue-4)", "var(--atomix-blue-2)" ];
-            return depthColors[Math.min(depth, depthColors.length - 1)];
+            {
+                const depthColors = [ "var(--atomix-blue-9)", "var(--atomix-blue-6)", "var(--atomix-blue-5)", "var(--atomix-blue-4)", "var(--atomix-blue-2)" ];
+                return depthColors[Math.min(depth, depthColors.length - 1)];
+            }
 
           case "value":
             if (data.length > 0) {
@@ -8041,7 +8495,7 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
         }
     }), [ colorConfig, data ]), squarify = useCallback(((nodes, x, y, width, height) => {
         if (0 === nodes.length) return;
-        const totalValue = nodes.reduce(((sum, node) => sum + node.value), 0);
+        const totalValue = _reduceInstanceProperty(nodes).call(nodes, ((sum, node) => sum + node.value), 0);
         if (1 === nodes.length) {
             const node = nodes[0];
             return void (node && (node.x = x, node.y = y, node.width = width, node.height = height));
@@ -8054,7 +8508,7 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
             if (!node) break;
             currentRow.push(node);
             // Calculate dimensions for current row
-            const rowValue = currentRow.reduce(((sum, n) => sum + n.value), 0), rowRatio = rowValue / totalValue;
+            const rowValue = _reduceInstanceProperty(currentRow).call(currentRow, ((sum, n) => sum + n.value), 0), rowRatio = rowValue / totalValue;
             let rowWidth, rowHeight;
             remainingWidth >= remainingHeight ? (rowWidth = remainingWidth * rowRatio, rowHeight = remainingHeight) : (rowWidth = remainingWidth, 
             rowHeight = remainingHeight * rowRatio);
@@ -8063,7 +8517,7 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
             if (remainingNodes.length > 0) {
                 const nextNode = remainingNodes[0];
                 if (!nextNode) break;
-                const testRow = [ ...currentRow, nextNode ], testRowValue = testRow.reduce(((sum, n) => sum + n.value), 0), testRowRatio = testRowValue / totalValue;
+                const testRow = [ ...currentRow, nextNode ], testRowValue = _reduceInstanceProperty(testRow).call(testRow, ((sum, n) => sum + n.value), 0), testRowRatio = testRowValue / totalValue;
                 let testRowWidth, testRowHeight;
                 remainingWidth >= remainingHeight ? (testRowWidth = remainingWidth * testRowRatio, 
                 testRowHeight = remainingHeight) : (testRowWidth = remainingWidth, testRowHeight = remainingHeight * testRowRatio);
@@ -8112,7 +8566,7 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
             // Calculate available space with padding
                         const availableWidth = scales.width - 40, availableHeight = scales.height - 40, leafNodes = data.filter((item => !item.children || 0 === item.children.length));
             if (!leafNodes.length) return null;
-            const totalValue = leafNodes.reduce(((sum, node) => sum + node.value), 0), treemapNodes = leafNodes.map(((item, index) => ({
+            const totalValue = _reduceInstanceProperty(leafNodes).call(leafNodes, ((sum, node) => sum + node.value), 0), treemapNodes = leafNodes.map(((item, index) => ({
                 id: item.id,
                 label: item.label,
                 value: item.value,
@@ -8186,7 +8640,7 @@ const TreemapChart = memo(forwardRef((({data: data = [], algorithm: algorithm =
 
 TreemapChart.displayName = "TreemapChart";
 
-const WaterfallChart = memo(forwardRef((({waterfallData: waterfallData = [], config: config = {}, waterfallOptions: waterfallOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const WaterfallChart =  memo( forwardRef((({waterfallData: waterfallData = [], config: config = {}, waterfallOptions: waterfallOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
     const {showConnectors: showConnectors = !0, connectorColor: connectorColor = "var(--atomix-gray-1)", connectorStyle: connectorStyle = "dashed", showValues: showValues = !0, valuePosition: valuePosition = "top", colors: waterfallColors = {
         positive: "var(--atomix-success)",
         negative: "var(--atomix-error)",
@@ -8441,7 +8895,7 @@ const SIZE_MAP = {
 
 ColorModeToggle.displayName = "ColorModeToggle";
 
-const Countdown = forwardRef((({target: target, show: show = [ "days", "hours", "minutes", "seconds" ], separator: separator = ":", focused: focused = !1, className: className = "", style: style, onComplete: onComplete}, ref) => {
+const Countdown =  forwardRef((({target: target, show: show = [ "days", "hours", "minutes", "seconds" ], separator: separator = ":", focused: focused = !1, className: className = "", style: style, onComplete: onComplete}, ref) => {
     const targetDate = "string" == typeof target ? new Date(target) : target, [now, setNow] = useState((() => new Date)), [completed, setCompleted] = useState(!1);
     useEffect((() => {
         if (completed) return;
@@ -8463,16 +8917,16 @@ const Countdown = forwardRef((({target: target, show: show = [ "days", "hours",
         diff <= 0 && !completed && (setCompleted(!0), onComplete && onComplete());
     }), [ diff, completed, onComplete ]);
     const timeParts = [];
-    return show.includes("days") && timeParts.push({
+    return _includesInstanceProperty(show).call(show, "days") && timeParts.push({
         label: "Days",
         value: days
-    }), show.includes("hours") && timeParts.push({
+    }), _includesInstanceProperty(show).call(show, "hours") && timeParts.push({
         label: "Hours",
         value: hours
-    }), show.includes("minutes") && timeParts.push({
+    }), _includesInstanceProperty(show).call(show, "minutes") && timeParts.push({
         label: "Minutes",
         value: minutes
-    }), show.includes("seconds") && timeParts.push({
+    }), _includesInstanceProperty(show).call(show, "seconds") && timeParts.push({
         label: "Seconds",
         value: seconds
     }), jsx("div", {
@@ -8520,8 +8974,9 @@ function useDataTable({data: data = [], columns: columns = [], sortable: sortabl
         if (!searchQuery) return data;
         const lowercaseQuery = searchQuery.toLowerCase();
         return data.filter((row => columns.some((column => {
+            var _context;
             const value = row[column.key];
-            return null != value && String(value).toLowerCase().includes(lowercaseQuery);
+            return null != value && _includesInstanceProperty(_context = String(value).toLowerCase()).call(_context, lowercaseQuery);
         }))));
     }), [ data, columns, searchQuery ]), sortedData = useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
         const aValue = a[sortConfig.key], bValue = b[sortConfig.key];
@@ -8561,22 +9016,22 @@ const DOTS = "...", range = (start, end) => {
     const paginationRange = useMemo((() => {
         // siblingCount + firstPage + lastPage + currentPage + 2*DOTS
         /*
-          Case 1: If the number of pages is less than the page numbers we want to show in our
-          paginationComponent, we return the range [1..totalPages]
-        */
+      Case 1: If the number of pages is less than the page numbers we want to show in our
+      paginationComponent, we return the range [1..totalPages]
+    */
         if (siblingCount + 5 >= totalPages) return range(1, totalPages);
         const leftSiblingIndex = Math.max(currentPage - siblingCount, 1), rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages), shouldShowLeftDots = leftSiblingIndex > 2, shouldShowRightDots = rightSiblingIndex < totalPages - 2, lastPageIndex = totalPages;
         /*
-            Case 2: No left dots to show, but rights dots to be shown
-        */
+        Case 2: No left dots to show, but rights dots to be shown
+    */
         return !shouldShowLeftDots && shouldShowRightDots ? [ ...range(1, 3 + 2 * siblingCount), "...", totalPages ] : 
         /*
-            Case 3: No right dots to show, but left dots to be shown
-        */
+        Case 3: No right dots to show, but left dots to be shown
+    */
         shouldShowLeftDots && !shouldShowRightDots ? [ 1, "...", ...range(totalPages - (3 + 2 * siblingCount) + 1, totalPages) ] : 
         /*
-            Case 4: Both left and right dots to be shown
-        */
+        Case 4: Both left and right dots to be shown
+    */
         shouldShowLeftDots && shouldShowRightDots ? [ 1, "...", ...range(leftSiblingIndex, rightSiblingIndex), "...", lastPageIndex ] : [];
     }), [ totalPages, siblingCount, currentPage ]), goToPage = page => {
         page >= 1 && page <= totalPages && page !== currentPage && onPageChange(page);
@@ -8600,7 +9055,7 @@ const DOTS = "...", range = (start, end) => {
         },
         DOTS: "..."
     };
-}, PaginationNavButton = ({type: type, onClick: onClick, disabled: disabled, label: label, iconName: iconName}) => jsx("li", {
+}, PaginationNavButton =  memo((({type: type, onClick: onClick, disabled: disabled, label: label, iconName: iconName}) => jsx("li", {
     className: `c-pagination__item c-pagination__item--${type} ${disabled ? "is-disabled" : ""}`,
     "aria-disabled": disabled,
     children: jsx("button", {
@@ -8615,10 +9070,7 @@ const DOTS = "...", range = (start, end) => {
             "aria-hidden": "true"
         })
     })
-})
-/**
- * Pagination component
- */ , Pagination = ({currentPage: currentPage = PAGINATION_DEFAULTS.currentPage, totalPages: totalPages = PAGINATION_DEFAULTS.totalPages, onPageChange: onPageChange, siblingCount: siblingCount = PAGINATION_DEFAULTS.siblingCount, showFirstLastButtons: showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons, showPrevNextButtons: showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons, size: size = PAGINATION_DEFAULTS.size, className: className = "", style: style, ariaLabel: ariaLabel = "Pagination", glass: glass}) => {
+}))), Pagination =  memo((({currentPage: currentPage = PAGINATION_DEFAULTS.currentPage, totalPages: totalPages = PAGINATION_DEFAULTS.totalPages, onPageChange: onPageChange, siblingCount: siblingCount = PAGINATION_DEFAULTS.siblingCount, showFirstLastButtons: showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons, showPrevNextButtons: showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons, size: size = PAGINATION_DEFAULTS.size, className: className = "", style: style, ariaLabel: ariaLabel = "Pagination", glass: glass}) => {
     const {paginationRange: paginationRange, goToPage: goToPage, nextPage: nextPage, prevPage: prevPage, firstPage: firstPage, lastPage: lastPage} = usePagination({
         currentPage: currentPage,
         totalPages: totalPages,
@@ -8698,9 +9150,9 @@ const DOTS = "...", range = (start, end) => {
         });
     }
     return paginationContent;
-};
+}));
 
-Pagination.displayName = "Pagination";
+Pagination.displayName = "Pagination", PaginationNavButton.displayName = "PaginationNavButton";
 
 /**
  * DataTable - A flexible and accessible data table component
@@ -8715,7 +9167,7 @@ Pagination.displayName = "Pagination";
  * />
  * ```
  */
-const DataTable = ({data: data, columns: columns, className: className, style: style, sortable: sortable = !1, filterable: filterable = !1, paginated: paginated = !1, pageSize: pageSize = 10, striped: striped = !1, bordered: bordered = !1, dense: dense = !1, loading: loading = !1, emptyMessage: emptyMessage = "No data available", onRowClick: onRowClick, onSort: onSort, ...props}) => {
+const DataTable =  memo((({data: data, columns: columns, className: className, style: style, sortable: sortable = !1, filterable: filterable = !1, paginated: paginated = !1, pageSize: pageSize = 10, striped: striped = !1, bordered: bordered = !1, dense: dense = !1, loading: loading = !1, emptyMessage: emptyMessage = "No data available", onRowClick: onRowClick, onSort: onSort, ...props}) => {
     const tableRef = useRef(null), {displayData: displayData, sortConfig: sortConfig, currentPage: currentPage, totalPages: totalPages, handleSort: handleSort, handlePageChange: handlePageChange, handleSearch: handleSearch} = useDataTable({
         data: data,
         columns: columns,
@@ -8818,7 +9270,7 @@ const DataTable = ({data: data, columns: columns, className: className, style: s
             })
         }) ]
     });
-};
+}));
 
 /**
  * Get the name of a month by its index (0-11)
@@ -9058,7 +9510,7 @@ function formatDate(date, format) {
  * Supports various display modes, date ranges, and customization options.
  */ DataTable.displayName = "DataTable";
 
-const DatePicker = forwardRef((({value: value, onChange: onChange, selectionMode: selectionMode = "single", startDate: startDate, endDate: endDate, onRangeChange: onRangeChange, format: format = "MM/dd/yyyy", minDate: minDate, maxDate: maxDate, placeholder: placeholder = "Select date...", disabled: disabled = !1, readOnly: readOnly = !1, clearable: clearable = !0, showTodayButton: showTodayButton = !0, showWeekNumbers: showWeekNumbers = !1, inline: inline = !1, id: id, name: name, className: className = "", placement: placement = "bottom-start", inputClassName: inputClassName = "", size: size = "md", style: style, glass: glass, ...props}, ref) => {
+const DatePicker =  forwardRef((({value: value, onChange: onChange, selectionMode: selectionMode = "single", startDate: startDate, endDate: endDate, onRangeChange: onRangeChange, format: format = "MM/dd/yyyy", minDate: minDate, maxDate: maxDate, placeholder: placeholder = "Select date...", disabled: disabled = !1, readOnly: readOnly = !1, clearable: clearable = !0, showTodayButton: showTodayButton = !0, showWeekNumbers: showWeekNumbers = !1, inline: inline = !1, id: id, name: name, className: className = "", placement: placement = "bottom-start", inputClassName: inputClassName = "", size: size = "md", style: style, glass: glass, ...props}, ref) => {
     const {isOpen: 
     // State
     isOpen, inputValue: inputValue, rangeInputValue: rangeInputValue, viewMode: viewMode, currentMonth: currentMonth, currentYear: currentYear, selectionMode: activeSelectionMode, rangeSelectionState: rangeSelectionState, datePickerRef: 
@@ -9358,12 +9810,54 @@ const DatePicker = forwardRef((({value: value, onChange: onChange, selectionMode
 DatePicker.displayName = "DatePicker";
 
 // Create context for dropdown state management
-const DropdownContext = createContext({
+const DropdownContext =  createContext({
     isOpen: !1,
     close: () => {},
     id: "",
     trigger: "click"
-}), Dropdown = ({children: children, menu: menu, placement: placement = "bottom-start", trigger: trigger = "click", offset: offset = DROPDOWN.DEFAULTS.OFFSET, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, maxHeight: maxHeight, minWidth: minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH, variant: variant, className: className = "", style: style, glass: glass, ...props}) => {
+}), DropdownItem =  memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
+    const {close: close} = useContext(DropdownContext), handleClick = e => {
+        disabled ? e.preventDefault() : (onClick && onClick(e), 
+        // Always close the dropdown when an item is clicked
+        close());
+    }, itemClasses = [ "c-dropdown__menu-item", active ? "is-active" : "", disabled ? "is-disabled" : "", className ].filter(Boolean).join(" "), linkProps = {
+        href: href,
+        className: itemClasses,
+        onClick: handleClick,
+        role: "menuitem",
+        tabIndex: 0,
+        ...props
+    };
+    return jsx("li", href && !disabled ? {
+        children: jsxs(LinkComponent || "a", {
+            ...linkProps,
+            children: [ icon && jsx("span", {
+                className: "c-dropdown__menu-item-icon",
+                children: icon
+            }), children ]
+        })
+    } : {
+        children: jsxs("button", {
+            type: "button",
+            className: itemClasses,
+            onClick: handleClick,
+            disabled: disabled,
+            role: "menuitem",
+            tabIndex: 0,
+            ...props,
+            children: [ icon && jsx("span", {
+                className: "c-dropdown__menu-item-icon",
+                children: icon
+            }), children ]
+        })
+    });
+})), DropdownDivider =  memo((({className: className = ""}) => jsx("li", {
+    className: `c-dropdown__divider ${className}`,
+    role: "separator"
+}))), DropdownHeader =  memo((({children: children, className: className = ""}) => jsx("li", {
+    className: `c-dropdown__header ${className}`,
+    children: children
+}))), Dropdown =  memo((({children: children, menu: menu, placement: placement = "bottom-start", trigger: trigger = "click", offset: offset = DROPDOWN.DEFAULTS.OFFSET, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, maxHeight: maxHeight, minWidth: minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH, variant: variant, className: className = "", style: style, glass: glass, ...props}) => {
     // Set up controlled vs uncontrolled state
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(!1), isControlled = void 0 !== controlledIsOpen, isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen, dropdownRef = useRef(null), toggleRef = useRef(null), menuRef = useRef(null), dropdownId = useRef(`dropdown-${Math.random().toString(36).substring(2, 9)}`).current, setIsOpen = useCallback((nextIsOpen => {
         isControlled || setUncontrolledIsOpen(nextIsOpen), onOpenChange && onOpenChange(nextIsOpen);
@@ -9467,7 +9961,8 @@ const DropdownContext = createContext({
             "aria-orientation": "vertical",
             "aria-hidden": !isOpen,
             onKeyDown: handleKeyDown,
-            children: glass ? // Default glass settings for dropdowns
+            children: glass ? 
+            // Default glass settings for dropdowns
             (() => {
                 const defaultGlassProps = {
                     displacementScale: 20,
@@ -9483,10 +9978,10 @@ const DropdownContext = createContext({
             })() : menuContent
         }) ]
     });
-};
+}));
 
 /**
- * Dropdown component for creating dropdown menus
+ * DropdownItem component for menu items
  */
 /**
  * EdgePanel state and functionality
@@ -9605,15 +10100,15 @@ function useEdgePanel(initialProps) {
         defaultProps.closeOnBackdropClick && event.target === event.currentTarget && closePanel();
     }), [ closePanel, defaultProps.closeOnBackdropClick ]);
     /**
-     * Set up event listeners for keyboard events
-     */
+   * Set up event listeners for keyboard events
+   */
     return useEffect((() => (isOpen && defaultProps.closeOnEscape && document.addEventListener("keydown", handleEscapeKey), 
     () => {
         document.removeEventListener("keydown", handleEscapeKey);
     })), [ isOpen, handleEscapeKey, defaultProps.closeOnEscape ]), 
     /**
-     * Set initial transform values
-     */
+   * Set initial transform values
+   */
     useEffect((() => {
         if (containerRef.current) {
             const {position: position, mode: mode} = defaultProps;
@@ -9623,8 +10118,8 @@ function useEdgePanel(initialProps) {
         }
     }), [ defaultProps.mode, defaultProps.position, defaultProps.glass, isOpen ]), 
     /**
-     * Sync with prop changes
-     */
+   * Sync with prop changes
+   */
     useEffect((() => {
         void 0 !== defaultProps.isOpen && defaultProps.isOpen !== isOpen && (defaultProps.isOpen ? openPanel(!!defaultProps.glass) : closePanel(!!defaultProps.glass));
     }), [ defaultProps.isOpen, closePanel, isOpen, openPanel, defaultProps.glass ]), 
@@ -9686,7 +10181,8 @@ function useEdgePanel(initialProps) {
  *   <p>Panel with custom glass effect</p>
  * </EdgePanel>
  * ```
- */ Dropdown.displayName = "Dropdown";
+ */ Dropdown.displayName = "Dropdown", DropdownItem.displayName = "DropdownItem", 
+DropdownDivider.displayName = "DropdownDivider", DropdownHeader.displayName = "DropdownHeader";
 
 const EdgePanel = ({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({
@@ -9800,7 +10296,7 @@ function useCheckbox(initialProps) {
 
 /**
  * Checkbox - A component for checkbox inputs
- */ const Checkbox = ({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+ */ const Checkbox =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
     const {generateCheckboxClass: generateCheckboxClass, checkboxRef: checkboxRef} = useCheckbox({
         indeterminate: indeterminate,
         disabled: disabled,
@@ -9854,7 +10350,7 @@ function useCheckbox(initialProps) {
         });
     }
     return checkboxContent;
-};
+}));
 
 /**
  * Form state and functionality
@@ -9868,10 +10364,10 @@ function useForm(initialProps) {
         ...initialProps
     };
     /**
-     * Generate form class based on properties
-     * @param props - Form properties
-     * @returns Class string
-     */    return {
+   * Generate form class based on properties
+   * @param props - Form properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateFormClass: props => {
             const {disabled: disabled = defaultProps.disabled, className: className = ""} = props, disabledClass = disabled ? FORM.CLASSES.DISABLED : "";
@@ -9926,10 +10422,10 @@ function useFormGroup(initialProps) {
         ...initialProps
     };
     /**
-     * Generate form group class based on properties
-     * @param props - Form group properties
-     * @returns Class string
-     */    return {
+   * Generate form group class based on properties
+   * @param props - Form group properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateFormGroupClass: props => {
             const {size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props, sizeClass = "md" === size ? "" : "sm" === size ? FORM_GROUP.CLASSES.SMALL : FORM_GROUP.CLASSES.LARGE, validationClass = invalid ? FORM_GROUP.CLASSES.INVALID : valid ? FORM_GROUP.CLASSES.VALID : "", disabledClass = disabled ? FORM_GROUP.CLASSES.DISABLED : "";
@@ -9990,10 +10486,10 @@ function useInput(initialProps) {
         ...initialProps
     };
     /**
-     * Generate input class based on properties
-     * @param props - Input properties
-     * @returns Class string
-     */    return {
+   * Generate input class based on properties
+   * @param props - Input properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateInputClass: props => {
             const {size: size = defaultProps.size, variant: variant = defaultProps.variant, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = "", type: type} = props, sizeClass = "md" === size ? "" : "sm" === size ? INPUT.CLASSES.SMALL : INPUT.CLASSES.LARGE, variantClass = variant ? `c-input--${variant}` : "", textareaClass = "textarea" === type ? "c-input--textarea" : "";
@@ -10016,7 +10512,7 @@ function useInput(initialProps) {
  * Input - A component for text input fields
  */ FormGroup.displayName = "FormGroup";
 
-const Input = forwardRef((({type: type = "text", value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Input =  memo( forwardRef((({type: type = "text", value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
     const {generateInputClass: generateInputClass} = useInput({
         size: size,
         variant: variant,
@@ -10079,7 +10575,7 @@ const Input = forwardRef((({type: type = "text", value: value, onChange: onChang
         });
     }
     return inputElement;
-}));
+})));
 
 /**
  * Hook for Hero component functionality
@@ -10098,25 +10594,25 @@ function useHero(initialProps) {
         parallax: !1,
         parallaxIntensity: .5,
         ...initialProps
-    }, hasBackgroundSlider = !!defaultProps.backgroundSlider, backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider ? 
+    }, hasBackgroundSlider = !!defaultProps.backgroundSlider, backgroundSliderResult = 
     /**
  * Hook for Hero background slider functionality
  * @param config - Background slider configuration
  * @returns Slider state and methods
  */
     function(config) {
-        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), autoplayRef = useRef(null), isPausedRef = useRef(!1), slideRefs = useMemo((() => slides.map((() => React.createRef()))), [ slides.length ]), videoRefs = useMemo((() => slides.map((() => React.createRef()))), [ slides.length ]), handleSlideTransition = useCallback((nextIndex => {
+        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), autoplayRef = useRef(null), isPausedRef = useRef(!1), slideRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), videoRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), handleSlideTransition = useCallback((nextIndex => {
             if (nextIndex === currentIndex || isTransitioning) return;
             if (nextIndex < 0 || nextIndex >= slides.length) return;
             setIsTransitioning(!0), 
             // Update current index
             setCurrentIndex(nextIndex);
             // Play video if it's a video slide
-            const currentVideo = videoRefs[nextIndex]?.current;
-            currentVideo && "video" === slides[nextIndex].type && !1 !== (slides[nextIndex].videoOptions || {}).autoplay && currentVideo.play().catch((() => {}));
+            const currentVideo = videoRefs[nextIndex]?.current, nextSlide = slides[nextIndex];
+            currentVideo && nextSlide && "video" === nextSlide.type && !1 !== (nextSlide.videoOptions || {}).autoplay && currentVideo.play().catch((() => {}));
             // Pause previous video if it exists
-                        const prevVideo = videoRefs[currentIndex]?.current;
-            prevVideo && "video" === slides[currentIndex].type && prevVideo.pause(), 
+                        const prevVideo = videoRefs[currentIndex]?.current, currentSlide = slides[currentIndex];
+            prevVideo && currentSlide && "video" === currentSlide.type && prevVideo.pause(), 
             // Reset transitioning state after transition duration
             setTimeout((() => {
                 setIsTransitioning(!1);
@@ -10172,7 +10668,13 @@ function useHero(initialProps) {
             pauseAutoplay: pauseAutoplay,
             resumeAutoplay: resumeAutoplay
         };
-    }(defaultProps.backgroundSlider) : void 0, hasBackgroundImage = !!hasBackgroundSlider || !!defaultProps.backgroundImageSrc || !!defaultProps.videoBackground, hasForegroundImage = !!defaultProps.imageSrc, useGridLayout = hasForegroundImage && "center" !== defaultProps.alignment, applyParallaxEffect = (element, intensity = .5) => {
+    }(defaultProps.backgroundSlider || {
+        slides: [],
+        autoplay: {
+            delay: 5e3,
+            pauseOnHover: !0
+        }
+    }), backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider ? backgroundSliderResult : void 0, hasBackgroundImage = !!hasBackgroundSlider || !!defaultProps.backgroundImageSrc || !!defaultProps.videoBackground, hasForegroundImage = !!defaultProps.imageSrc, useGridLayout = hasForegroundImage && "center" !== defaultProps.alignment, applyParallaxEffect = (element, intensity = .5) => {
         if (!element) return;
         // Ensure intensity is between 0 and 1
                 const safeIntensity = Math.max(0, Math.min(1, intensity));
@@ -10255,8 +10757,8 @@ function useHero(initialProps) {
         ...initialProps
     };
     /**
-     * Check if the river has a background image
-     */    return {
+   * Check if the river has a background image
+   */    return {
         generateRiverClassNames: (baseClassName = "") => {
             const classes = [ RIVER.SELECTORS.RIVER.replace(".", "") ];
             // Add layout classes
@@ -10320,10 +10822,10 @@ function useHero(initialProps) {
         ...initialProps
     };
     /**
-     * Generate nav class based on properties
-     * @param props - Nav properties
-     * @returns Class string
-     */    return {
+   * Generate nav class based on properties
+   * @param props - Nav properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateNavClass: props => {
             const {alignment: alignment = defaultProps.alignment, variant: variant = defaultProps.variant, className: className = ""} = props;
@@ -10345,10 +10847,10 @@ function useHero(initialProps) {
         ...initialProps
     };
     /**
-     * Generate nav item class based on properties
-     * @param props - Nav item properties
-     * @returns Class string
-     */    return {
+   * Generate nav item class based on properties
+   * @param props - Nav item properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateNavItemClass: props => {
             const {dropdown: dropdown = defaultProps.dropdown, megaMenu: megaMenu = defaultProps.megaMenu, active: active = defaultProps.active, disabled: disabled = defaultProps.disabled, className: className = ""} = props;
@@ -10374,10 +10876,10 @@ function useHero(initialProps) {
         ...initialProps
     }, isInFixedBottomNavbar = () => null !== document.querySelector(".c-navbar--fixed-bottom");
     /**
-     * Generate dropdown menu class based on properties
-     * @param props - Dropdown properties
-     * @returns Class string
-     */    return {
+   * Generate dropdown menu class based on properties
+   * @param props - Dropdown properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateDropdownMenuClass: props => {
             const {alignment: alignment = defaultProps.alignment, megaMenu: megaMenu = defaultProps.megaMenu, className: className = ""} = props, baseClass = megaMenu ? NAV.SELECTORS.MEGA_MENU.replace(".", "") : NAV.SELECTORS.DROPDOWN_MENU.replace(".", "");
@@ -10459,10 +10961,10 @@ function useHero(initialProps) {
         wrapperRef.current.style.height = "auto");
     }), [ defaultProps.isOpen, isOpenState, defaultProps.collapsible, defaultProps.collapsibleDesktop ]);
     /**
-     * Generate side menu class based on properties
-     * @param props - Side menu properties
-     * @returns Class string
-     */
+   * 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;
@@ -10473,9 +10975,9 @@ function useHero(initialProps) {
         setIsOpenState(newState);
     }, getCurrentOpenState = () => void 0 !== defaultProps.isOpen ? defaultProps.isOpen : isOpenState;
     /**
-     * Generate wrapper class
-     * @returns Class string
-     */    return {
+   * Generate wrapper class
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         isOpenState: getCurrentOpenState(),
         wrapperRef: wrapperRef,
@@ -10506,9 +11008,9 @@ function useHero(initialProps) {
         ...initialProps
     };
     /**
-     * Generate side menu item class based on properties
-     * @returns Class string
-     */    return {
+   * Generate side menu item class based on properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateSideMenuItemClass: () => {
             const {active: active = defaultProps.active, disabled: disabled = defaultProps.disabled, className: className = ""} = defaultProps, activeClass = active ? SIDE_MENU.CLASSES.ACTIVE : "", disabledClass = disabled ? SIDE_MENU.CLASSES.DISABLED : "";
@@ -10633,7 +11135,8 @@ function useHero(initialProps) {
  * const style = cssVarsToStyle(vars)
  * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
  */ function cssVarsToStyle(vars) {
-    return Object.entries(vars).reduce(((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
+    var _context;
+    return _reduceInstanceProperty(_context = Object.entries(vars)).call(_context, ((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
     acc)), {});
 }
 
@@ -10641,7 +11144,8 @@ function useHero(initialProps) {
  * Merge multiple CSS variable objects
  * Later objects override earlier ones
  */ function mergeCSSVars(...varObjects) {
-    return varObjects.reduce(((acc, vars) => (vars && Object.assign(acc, vars), acc)), {});
+    return _reduceInstanceProperty(varObjects).call(varObjects, ((acc, vars) => (vars && Object.assign(acc, vars), 
+    acc)), {});
 }
 
 /**
@@ -10674,11 +11178,20 @@ function useHero(initialProps) {
 
 /**
  * Apply part styles to element props
- */
+ */ function applyPartStyles(baseProps, partStyles) {
+    return partStyles ? {
+        ...baseProps,
+        className: mergeClassNames(baseProps.className, partStyles.className),
+        style: {
+            ...baseProps.style,
+            ...partStyles.style
+        }
+    } : baseProps;
+}
+
 /**
  * Create style object from CSS variables
- */
-function createCSSVarStyle(cssVars, baseStyle) {
+ */ function createCSSVarStyle(cssVars, baseStyle) {
     return cssVars ? {
         ...cssVarsToStyle(cssVars),
         ...baseStyle
@@ -10763,40 +11276,130 @@ function mergeComponentProps(baseProps, customization) {
 }
 
 /**
- * Utility Functions Exports
+ * Font Preloading Utilities
+ *
+ * Provides utilities for preloading fonts to improve performance
+ * and prevent Flash of Invisible Text (FOIT).
+ */
+/**
+ * Creates a preload link element for a font
+ *
+ * @param config - Font preload configuration
+ * @returns HTML link element for preloading
+ *
+ * @example
+ * ```tsx
+ * const preloadLink = createFontPreloadLink({
+ *   family: 'Nunito Sans',
+ *   path: '/fonts/nunito-sans/nunito-sans-regular.woff2',
+ *   weight: 400
+ * });
+ * document.head.appendChild(preloadLink);
+ * ```
+ */ function createFontPreloadLink(config) {
+    const {path: path, format: format = "woff2", crossorigin: crossorigin = "anonymous"} = config, link = document.createElement("link");
+    return link.rel = "preload", link.as = "font", link.href = path, link.type = `font/${format}`, 
+    link.crossOrigin = crossorigin, link;
+}
+
+/**
+ * Preloads multiple fonts
+ *
+ * @param fonts - Array of font configurations to preload
+ * @returns Array of created link elements
+ *
+ * @example
+ * ```tsx
+ * const links = preloadFonts([
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-regular.woff2', weight: 400 },
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-bold.woff2', weight: 700 },
+ * ]);
+ * links.forEach(link => document.head.appendChild(link));
+ * ```
+ */ function preloadFonts(fonts) {
+    return fonts.map(createFontPreloadLink);
+}
+
+/**
+ * Generates preload link HTML tags as strings
+ * Useful for server-side rendering or static HTML generation
+ *
+ * @param fonts - Array of font configurations
+ * @returns Array of HTML string representations
+ *
+ * @example
+ * ```tsx
+ * const htmlTags = generateFontPreloadTags([
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-regular.woff2' },
+ * ]);
+ * // Returns: ['<link rel="preload" as="font" href="/fonts/..." type="font/woff2" crossorigin="anonymous">']
+ * ```
+ */ function generateFontPreloadTags(fonts) {
+    return fonts.map((config => {
+        const {path: path, format: format = "woff2", crossorigin: crossorigin = "anonymous"} = config;
+        return `<link rel="preload" as="font" href="${path}" type="font/${format}" crossorigin="${crossorigin}">`;
+    }));
+}
+
+/**
+ * Default font configurations for Atomix Design System
+ * These can be used as a starting point for font preloading
  */ Input.displayName = "Input";
 
-const utilsImport =  Object.freeze( Object.defineProperty({
+const DEFAULT_ATOMIX_FONTS = [ {
+    family: "Nunito Sans",
+    path: "/fonts/nunito-sans/nunito-sans-regular.woff2",
+    weight: 400,
+    style: "normal",
+    format: "woff2"
+}, {
+    family: "Nunito Sans",
+    path: "/fonts/nunito-sans/nunito-sans-bold.woff2",
+    weight: 700,
+    style: "normal",
+    format: "woff2"
+}, {
+    family: "Nunito Sans",
+    path: "/fonts/nunito-sans/nunito-sans-italic.woff2",
+    weight: 400,
+    style: "italic",
+    format: "woff2"
+}, {
+    family: "Nunito Sans",
+    path: "/fonts/nunito-sans/nunito-sans-bold-italic.woff2",
+    weight: 700,
+    style: "italic",
+    format: "woff2"
+} ], utilsImport =  Object.freeze( Object.defineProperty({
     __proto__: null,
-    applyPartStyles: function(baseProps, partStyles) {
-        return partStyles ? {
-            ...baseProps,
-            className: mergeClassNames(baseProps.className, partStyles.className),
-            style: {
-                ...baseProps.style,
-                ...partStyles.style
-            }
-        } : baseProps;
-    },
+    DEFAULT_ATOMIX_FONTS: DEFAULT_ATOMIX_FONTS,
+    applyPartStyles: applyPartStyles,
     createCSSVarStyle: createCSSVarStyle,
     createDebugAttrs: createDebugAttrs,
+    createFontPreloadLink: createFontPreloadLink,
     createPartProps: createPartProps,
     extractYouTubeId: extractYouTubeId,
+    generateFontPreloadTags: generateFontPreloadTags,
     generateUUID: generateUUID,
     getPartStyles: getPartStyles,
     hasCustomization: hasCustomization,
     isYouTubeUrl: isYouTubeUrl,
     mergeClassNames: mergeClassNames,
-    mergeComponentProps: mergeComponentProps
+    mergeComponentProps: mergeComponentProps,
+    preloadFonts: preloadFonts
 }, Symbol.toStringTag, {
     value: "Module"
 }));
 
+/**
+ * Utility Functions Exports
+ */
 /**
  * Todo composable hook - manages todo items state and operations
  * @param initialProps - Initial todo properties
  * @returns Todo state and methods
- */ function useTodo(initialProps) {
+ */
+function useTodo(initialProps) {
     // Default todo properties
     const defaultProps = {
         items: [],
@@ -10951,10 +11554,10 @@ const utilsImport =  Object.freeze( Object.defineProperty({
         ...initialProps
     };
     /**
-     * Generate radio class based on properties
-     * @param props - Radio properties
-     * @returns Class string
-     */    return {
+   * Generate radio class based on properties
+   * @param props - Radio properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateRadioClass: props => {
             const {disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props;
@@ -10980,10 +11583,10 @@ const utilsImport =  Object.freeze( Object.defineProperty({
         ...initialProps
     };
     /**
-     * Generate select class based on properties
-     * @param props - Select properties
-     * @returns Class string
-     */    return {
+   * Generate select class based on properties
+   * @param props - Select properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateSelectClass: props => {
             const {size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props, sizeClass = "md" === size ? "" : "sm" === size ? SELECT.CLASSES.SMALL : SELECT.CLASSES.LARGE;
@@ -11009,10 +11612,10 @@ const utilsImport =  Object.freeze( Object.defineProperty({
         ...initialProps
     };
     /**
-     * Generate textarea class based on properties
-     * @param props - Textarea properties
-     * @returns Class string
-     */    return {
+   * Generate textarea class based on properties
+   * @param props - Textarea properties
+   * @returns Class string
+   */    return {
         defaultProps: defaultProps,
         generateTextareaClass: props => {
             const {size: size = defaultProps.size, variant: variant = defaultProps.variant, disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, className: className = ""} = props, sizeClass = "md" === size ? "" : "sm" === size ? TEXTAREA.CLASSES.SMALL : TEXTAREA.CLASSES.LARGE, variantClass = variant ? `c-input--${variant}` : "";
@@ -11308,7 +11911,7 @@ function useSlider(options) {
             total: 0,
             average: 0
         };
-        const values = processedData.map((d => d.value)), min = Math.min(...values), max = Math.max(...values), total = values.reduce(((sum, val) => sum + val), 0);
+        const values = processedData.map((d => d.value)), min = Math.min(...values), max = Math.max(...values), total = _reduceInstanceProperty(values).call(values, ((sum, val) => sum + val), 0);
         return {
             min: min,
             max: max,
@@ -11336,14 +11939,24 @@ function useSlider(options) {
         if (!data.length) return {
             xScale: () => padding.left,
             yScale: () => padding.top + innerHeight,
+            minValue: 0,
+            maxValue: 0,
+            valueRange: 0,
+            innerWidth: innerWidth,
+            innerHeight: innerHeight,
             width: width,
             height: height,
             padding: padding
         };
-        const values = data.map((d => d.value)), minValue = Math.min(0, ...values), valueRange = Math.max(...values) - minValue || 1;
+        const values = data.map((d => d.value)), minValue = Math.min(0, ...values), maxValue = Math.max(...values), valueRange = maxValue - minValue || 1;
         return {
             xScale: index => padding.left + index / Math.max(data.length - 1, 1) * innerWidth,
             yScale: value => padding.top + innerHeight - (value - minValue) / valueRange * innerHeight,
+            minValue: minValue,
+            maxValue: maxValue,
+            valueRange: valueRange,
+            innerWidth: innerWidth,
+            innerHeight: innerHeight,
             width: width,
             height: height,
             padding: padding
@@ -11423,7 +12036,7 @@ const composablesImport =  Object.freeze( Object.defineProperty({
     useTodo: useTodo
 }, Symbol.toStringTag, {
     value: "Module"
-})), Select = ({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, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+})), Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
     const {generateSelectClass: generateSelectClass} = useSelect({
         size: size,
         disabled: disabled,
@@ -11562,7 +12175,7 @@ const composablesImport =  Object.freeze( Object.defineProperty({
         });
     }
     return selectContent;
-};
+}));
 
 /**
  * Select - A component for dropdown selection
@@ -11571,7 +12184,7 @@ const composablesImport =  Object.freeze( Object.defineProperty({
 /**
  * Radio - A component for radio button inputs
  */
-const Radio = ({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
     const {generateRadioClass: generateRadioClass} = useRadio({
         disabled: disabled,
         invalid: invalid,
@@ -11622,14 +12235,14 @@ const Radio = ({label: label, checked: checked = !1, onChange: onChange, classNa
         });
     }
     return radioContent;
-};
+}));
 
 Radio.displayName = "Radio";
 
 /**
  * Textarea - A component for multiline text input
  */
-const Textarea = forwardRef((({value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Textarea =  memo( forwardRef((({value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
     const {generateTextareaClass: generateTextareaClass} = useTextarea({
         size: size,
         variant: variant,
@@ -11687,7 +12300,7 @@ const Textarea = forwardRef((({value: value, onChange: onChange, onBlur: onBlur,
         });
     }
     return textareaElement;
-}));
+})));
 
 Textarea.displayName = "Textarea";
 
@@ -11700,7 +12313,7 @@ Textarea.displayName = "Textarea";
  * <FooterSocialLink platform="custom" url="https://example.com" icon={<CustomIcon />} label="Custom Platform" />
  * ```
  */
-const FooterSocialLink = forwardRef((({platform: platform, url: url, icon: icon, label: label, size: size = "md", variant: variant = "default", disabled: disabled = !1, className: className = "", ...props}, ref) => {
+const FooterSocialLink =  forwardRef((({platform: platform, url: url, icon: icon, label: label, size: size = "md", variant: variant = "default", disabled: disabled = !1, className: className = "", ...props}, ref) => {
     const linkClass = [ "c-footer__social-link", `c-footer__social-link--${platform}`, `c-footer__social-link--${size}`, `c-footer__social-link--${variant}`, disabled && "c-footer__social-link--disabled", className ].filter(Boolean).join(" "), ariaLabel = label || `Follow us on ${(platform => ({
         facebook: "Facebook",
         twitter: "Twitter",
@@ -11785,7 +12398,7 @@ FooterSocialLink.displayName = "FooterSocialLink";
  * </Grid>
  * ```
  */
-const Grid = forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, direction: direction, wrap: wrap, ...props}, ref) => {
+const Grid =  forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, direction: direction, wrap: wrap, ...props}, ref) => {
     const classes = [ "o-grid" ];
     return justifyContent && classes.push(`u-justify-content-${justifyContent}`), alignItems && classes.push(`u-align-items-${alignItems}`), 
     noGutters && classes.push("o-grid--no-gutters"), direction && classes.push(`u-flex-direction-${direction}`), 
@@ -11804,7 +12417,7 @@ Grid.displayName = "Grid";
  * GridCol component for creating columns within a Grid.
  * Uses the CSS grid column classes defined in _objects.grid.scss.
  */
-const GridCol = forwardRef((({children: children, className: className = "", xs: xs, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, offsetXs: offsetXs, offsetSm: offsetSm, offsetMd: offsetMd, offsetLg: offsetLg, offsetXl: offsetXl, offsetXxl: offsetXxl, grow: grow, shrink: shrink, basis: basis, align: align, ...props}, ref) => {
+const GridCol =  forwardRef((({children: children, className: className = "", xs: xs, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, offsetXs: offsetXs, offsetSm: offsetSm, offsetMd: offsetMd, offsetLg: offsetLg, offsetXl: offsetXl, offsetXxl: offsetXxl, grow: grow, shrink: shrink, basis: basis, align: align, ...props}, ref) => {
     // If no specific size is provided, use auto class
     const classes = xs || sm || md || lg || xl || xxl ? [ "o-grid__col" ] : [ "o-grid__col", "o-grid__col--auto" ], processResponsiveProp = (value, breakpoint) => {
         void 0 !== value && (
@@ -11847,7 +12460,7 @@ GridCol.displayName = "GridCol";
  * </Container>
  * ```
  */
-const Row = forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, ...props}, ref) => {
+const Row =  forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, ...props}, ref) => {
     const classes = [ "o-grid" ];
     return justifyContent && classes.push(`u-justify-content-${justifyContent}`), alignItems && classes.push(`u-align-items-${alignItems}`), 
     noGutters && classes.push("o-grid--no-gutters"), className && classes.push(className), 
@@ -11884,7 +12497,7 @@ Row.displayName = "Row";
  * </Footer>
  * ```
  */
-const Footer = forwardRef((({brand: brand, brandLogo: brandLogo, brandDescription: brandDescription, copyright: copyright, layout: layout = "columns", variant: variant = "primary", size: size = "md", showNewsletter: showNewsletter = !1, newsletterTitle: newsletterTitle = "Stay Updated", newsletterDescription: newsletterDescription = "Subscribe to our newsletter for the latest updates.", newsletterPlaceholder: newsletterPlaceholder = "Enter your email", newsletterButtonText: newsletterButtonText = "Subscribe", onNewsletterSubmit: onNewsletterSubmit, socialLinks: socialLinks = [], showBackToTop: showBackToTop = !1, backToTopText: backToTopText = "Back to Top", onBackToTop: onBackToTop, showDivider: showDivider = !0, sticky: sticky = !1, children: children, className: className = "", disabled: disabled = !1, glass: glass, ...props}, ref) => {
+const Footer =  forwardRef((({brand: brand, brandLogo: brandLogo, brandDescription: brandDescription, copyright: copyright, layout: layout = "columns", variant: variant = "primary", size: size = "md", showNewsletter: showNewsletter = !1, newsletterTitle: newsletterTitle = "Stay Updated", newsletterDescription: newsletterDescription = "Subscribe to our newsletter for the latest updates.", newsletterPlaceholder: newsletterPlaceholder = "Enter your email", newsletterButtonText: newsletterButtonText = "Subscribe", onNewsletterSubmit: onNewsletterSubmit, socialLinks: socialLinks = [], showBackToTop: showBackToTop = !1, backToTopText: backToTopText = "Back to Top", onBackToTop: onBackToTop, showDivider: showDivider = !0, sticky: sticky = !1, children: children, className: className = "", disabled: disabled = !1, glass: glass, ...props}, ref) => {
     const {footerClass: footerClass, containerClass: containerClass, brandClass: brandClass, sectionsClass: sectionsClass, bottomClass: bottomClass, handleNewsletterSubmit: handleNewsletterSubmit, handleBackToTop: handleBackToTop, socialLinks: footerSocialLinks} = function(options = {}) {
         const {layout: layout = FOOTER.DEFAULTS.LAYOUT, variant: variant = FOOTER.DEFAULTS.VARIANT, size: size = FOOTER.DEFAULTS.SIZE, sticky: sticky = FOOTER.DEFAULTS.STICKY, showNewsletter: showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER, showBackToTop: showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP, socialLinks: socialLinks = [], onNewsletterSubmit: onNewsletterSubmit, onBackToTop: onBackToTop, className: className = ""} = options;
         // Generate footer classes
@@ -12015,7 +12628,7 @@ const Footer = forwardRef((({brand: brand, brandLogo: brandLogo, brandDescriptio
                     alignItems: "centered" === layout || "stacked" === layout ? "center" : void 0,
                     children: React.Children.map(children, (child => 
                     // Check if the child is a valid React element
-                    React.isValidElement(child) ? React.cloneElement(child, {
+                     React.isValidElement(child) ?  React.cloneElement(child, {
                         showNewsletter: showNewsletter
                     }) : child))
                 })
@@ -12104,7 +12717,7 @@ Footer.displayName = "Footer";
  * </MasonryGrid>
  * ```
  */
-const MasonryGrid = 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) => {
+const MasonryGrid =  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] = useState(xs), [positions, setPositions] = useState([]), [layoutComplete, setLayoutComplete] = useState(!1), [loadingImages, setLoadingImages] = useState(!1), containerRef = useRef(null), columnHeights = useRef([]), imagesLoadedCount = useRef(0), totalImagesCount = useRef(0), imageElements = useRef(new Map);
     useEffect((() => {
@@ -12127,11 +12740,11 @@ const MasonryGrid = forwardRef((({children: children, className: className = "",
     useEffect((() => {
         const newItems = [];
         Children.forEach(children, ((child, index) => {
-            isValidElement(child) && newItems.push({
+             isValidElement(child) && newItems.push({
                 id: child.key?.toString() || `masonry-item-${index}`,
                 element: child,
                 position: null,
-                ref: React.createRef()
+                ref:  React.createRef()
             });
         })), setItems(newItems);
     }), [ children ]);
@@ -12289,7 +12902,7 @@ MasonryGrid.displayName = "MasonryGrid";
  * </MasonryGrid>
  * ```
  */
-const MasonryGridItem = forwardRef((({children: children, className: className = "", ...props}, ref) => {
+const MasonryGridItem =  forwardRef((({children: children, className: className = "", ...props}, ref) => {
     const classes = [ "o-masonry-grid__item-inner" ];
     return className && classes.push(className), jsx("div", {
         ref: ref,
@@ -12312,7 +12925,7 @@ const layouts =  Object.freeze( Object.defineProperty({
     Row: Row
 }, Symbol.toStringTag, {
     value: "Module"
-})), FooterSection = forwardRef((({title: title, icon: icon, collapsible: collapsible = !1, defaultCollapsed: defaultCollapsed = !1, showNewsletter: showNewsletter = !1, children: children, className: className = "", ...props}, ref) => {
+})), FooterSection =  forwardRef((({title: title, icon: icon, collapsible: collapsible = !1, defaultCollapsed: defaultCollapsed = !1, showNewsletter: showNewsletter = !1, children: children, className: className = "", ...props}, ref) => {
     const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed), sectionClass = [ "c-footer__section", collapsible && "c-footer__section--collapsible", isCollapsed && "c-footer__section--collapsed", className ].filter(Boolean).join(" ");
     return jsx(GridCol, {
         xs: 12,
@@ -12386,7 +12999,7 @@ const layouts =  Object.freeze( Object.defineProperty({
  * </FooterLink>
  * ```
  */
-const FooterLink = forwardRef((({href: href, icon: icon, external: external = !1, active: active = !1, disabled: disabled = !1, onClick: onClick, children: children, className: className = "", LinkComponent: LinkComponent, ...props}, ref) => {
+const FooterLink =  forwardRef((({href: href, icon: icon, external: external = !1, active: active = !1, disabled: disabled = !1, onClick: onClick, children: children, className: className = "", LinkComponent: LinkComponent, ...props}, ref) => {
     const linkProps = {
         className: [ "c-footer__link", active && "c-footer__link--active", disabled && "c-footer__link--disabled", className ].filter(Boolean).join(" "),
         onClick: disabled ? void 0 : onClick,
@@ -12648,32 +13261,34 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
 
 Hero.displayName = "Hero";
 
-const List = ({children: children, variant: variant = "default", className: className = "", style: style, ...props}) => {
+const List =  memo((({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 = [ "number", "text" ].includes(variant) ? "ol" : "ul";
+        const listClasses = [ LIST.BASE_CLASS, "default" !== variant && `c-list--${variant}`, className ].filter(Boolean).join(" "), ListElement = _includesInstanceProperty(_context = [ "number", "text" ]).call(_context, variant) ? "ol" : "ul";
     // Determine the HTML element based on variant
         return jsx(ListElement, {
         className: listClasses,
         style: style,
         ...props,
-        children: React.Children.map(children, (child => (React.isValidElement(child), jsx("li", {
+        children: React.Children.map(children, (child => jsx("li", {
             className: "c-list__item",
             children: child
-        }))))
+        })))
     });
-};
+}));
 
 List.displayName = "List";
 
 const ListGroup = ({children: children, className: className = "", style: style, variant: variant = "default"}) => {
     // Generate CSS classes
-    const listGroupClasses = [ LIST_GROUP.BASE_CLASS, className ].filter(Boolean).join(" "), validLists = React.Children.toArray(children).filter((child => React.isValidElement(child) && child.type === List));
+    const listGroupClasses = [ LIST_GROUP.BASE_CLASS, className ].filter(Boolean).join(" "), validLists = React.Children.toArray(children).filter((child =>  React.isValidElement(child) && child.type === List));
     // Get valid List children
         return jsx("div", {
         className: listGroupClasses,
         style: style,
         children: validLists.map(((child, index) => {
             const childProps = child.props;
+            
             return React.cloneElement(child, {
                 key: index,
                 variant: childProps?.variant ?? variant
@@ -12882,7 +13497,7 @@ const Messages = ({messages: messages = [], otherAvatar: otherAvatar, selfAvatar
 /**
  * Modal component for displaying overlay content
  */
-const Modal = ({children: children, isOpen: isOpen = !1, onOpenChange: onOpenChange, onClose: onClose, onOpen: onOpen, title: title, subtitle: subtitle, size: size = "md", backdrop: backdrop = !0, keyboard: keyboard = !0, className: className = "", style: style, closeButton: closeButton = !0, footer: footer, glass: glass, ...props}) => {
+const Modal =  memo((({children: children, isOpen: isOpen = !1, onOpenChange: onOpenChange, onClose: onClose, onOpen: onOpen, title: title, subtitle: subtitle, size: size = "md", backdrop: backdrop = !0, keyboard: keyboard = !0, className: className = "", style: style, closeButton: closeButton = !0, footer: footer, glass: glass, ...props}) => {
     const modalRef = useRef(null), dialogRef = useRef(null), backdropRef = useRef(null), {isOpen: isOpenState, open: open, close: close} = 
     /**
  * Hook for managing modal state
@@ -12991,7 +13606,8 @@ const Modal = ({children: children, isOpen: isOpen = !1, onOpenChange: onOpenCha
         }), jsx("div", {
             ref: dialogRef,
             className: "c-modal__dialog",
-            children: glass ? // Default glass settings for modals
+            children: glass ? 
+            // Default glass settings for modals
             (() => {
                 const defaultGlassProps = {
                     displacementScale: document.querySelector(".c-modal---glass .c-modal__content")?.clientHeight,
@@ -13010,7 +13626,7 @@ const Modal = ({children: children, isOpen: isOpen = !1, onOpenChange: onOpenCha
             })() : modalContent
         }) ]
     });
-};
+}));
 
 Modal.displayName = "Modal";
 
@@ -13029,7 +13645,7 @@ Modal.displayName = "Modal";
  * </Nav>
  * ```
  */
-const Nav = forwardRef((({children: children, alignment: alignment = "start", variant: variant = "default", className: className = "", disabled: disabled = !1, glass: glass}, ref) => {
+const Nav =  forwardRef((({children: children, alignment: alignment = "start", variant: variant = "default", className: className = "", disabled: disabled = !1, glass: glass}, ref) => {
     const {generateNavClass: generateNavClass} = useNav({
         alignment: alignment,
         variant: variant
@@ -13043,8 +13659,9 @@ const Nav = forwardRef((({children: children, alignment: alignment = "start", va
         role: "menubar",
         "aria-orientation": "horizontal",
         children: React.Children.map(children, (child => {
-            if (React.isValidElement(child)) {
+            if ( React.isValidElement(child)) {
                 const childProps = child.props;
+                
                 return React.cloneElement(child, {
                     ...childProps,
                     disabled: !!disabled || childProps?.disabled
@@ -13101,7 +13718,7 @@ Nav.displayName = "Nav";
  * </NavItem>
  * ```
  */
-const NavItem = forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, LinkComponent: LinkComponent}, ref) => {
+const NavItem =  forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, LinkComponent: LinkComponent}, ref) => {
     const {generateNavItemClass: generateNavItemClass, generateNavLinkClass: generateNavLinkClass, handleClick: handleClick} = useNavItem({
         dropdown: dropdown,
         megaMenu: megaMenu,
@@ -13176,7 +13793,7 @@ NavItem.displayName = "NavItem";
  * </Navbar>
  * ```
  */
-const Navbar = forwardRef((({brand: brand, children: children, variant: variant, position: position = "static", containerWidth: containerWidth, collapsible: collapsible = !0, expanded: expanded, onToggle: onToggle, className: className = "", style: style, disabled: disabled = !1, backdrop: backdrop = !1, closeOnOutsideClick: closeOnOutsideClick = !0, closeOnEscape: closeOnEscape = !0, ariaLabel: ariaLabel = "Main navigation", id: id, glass: glass}, ref) => {
+const Navbar =  forwardRef((({brand: brand, children: children, variant: variant, position: position = "static", containerWidth: containerWidth, collapsible: collapsible = !0, expanded: expanded, onToggle: onToggle, className: className = "", style: style, disabled: disabled = !1, backdrop: backdrop = !1, closeOnOutsideClick: closeOnOutsideClick = !0, closeOnEscape: closeOnEscape = !0, ariaLabel: ariaLabel = "Main navigation", id: id, glass: glass}, ref) => {
     const {generateNavbarClass: generateNavbarClass, generateContainerStyle: generateContainerStyle, generateCollapseClass: generateCollapseClass} = useNavbar({
         position: position,
         collapsible: collapsible,
@@ -13319,13 +13936,13 @@ function setRef(ref, value) {
  * ```
  */ Navbar.displayName = "Navbar";
 
-const SideMenuList = forwardRef((({children: children, className: className = ""}, ref) => {
+const SideMenuList =  forwardRef((({children: children, className: className = ""}, ref) => {
     const listClass = `c-side-menu__list ${className}`.trim();
     return jsx("ul", {
         ref: ref,
         className: listClass,
         role: "list",
-        children: React.Children.map(children, ((child, index) => React.isValidElement(child) ? jsx("li", {
+        children: React.Children.map(children, ((child, index) =>  React.isValidElement(child) ? jsx("li", {
             className: "c-side-menu__item",
             role: "listitem",
             children: child
@@ -13360,7 +13977,7 @@ SideMenuList.displayName = "SideMenuList";
  * </SideMenuItem>
  * ```
  */
-const SideMenuItem = forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, LinkComponent: LinkComponentProp}, ref) => {
+const SideMenuItem =  forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, LinkComponent: LinkComponentProp}, ref) => {
     const {LinkComponent: LinkComponentFromContext} = useSideMenuContext(), LinkComponent = LinkComponentProp ?? LinkComponentFromContext, {generateSideMenuItemClass: generateSideMenuItemClass, handleClick: handleClick} = useSideMenuItem({
         active: active,
         disabled: disabled,
@@ -13447,7 +14064,7 @@ const SideMenuItem = forwardRef((({children: children, href: href, onClick: onCl
 SideMenuItem.displayName = "SideMenuItem";
 
 // Context for passing LinkComponent to SideMenuItem children
-const SideMenuContext = createContext({}), useSideMenuContext = () => useContext(SideMenuContext)
+const SideMenuContext =  createContext({}), useSideMenuContext = () => useContext(SideMenuContext)
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
  * Automatically collapses on mobile devices and can be toggled via a header button.
@@ -13462,7 +14079,7 @@ const SideMenuContext = createContext({}), useSideMenuContext = () => useContext
  *   </SideMenuList>
  * </SideMenu>
  * ```
- */ , SideMenu = forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, LinkComponent: LinkComponent}, ref) => {
+ */ , SideMenu =  forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, LinkComponent: LinkComponent}, ref) => {
     const {isOpenState: isOpenState, wrapperRef: wrapperRef, innerRef: innerRef, sideMenuRef: sideMenuRef, generateSideMenuClass: generateSideMenuClass, generateWrapperClass: generateWrapperClass, handleToggle: handleToggle} = useSideMenu({
         isOpen: isOpen,
         onToggle: onToggle,
@@ -13665,7 +14282,7 @@ const SideMenuContext = createContext({}), useSideMenuContext = () => useContext
 // Hook to use SideMenu context
 SideMenu.displayName = "SideMenu";
 
-const Menu = forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsx("div", {
+const Menu =  forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsx("div", {
     ref: ref,
     className: `c-menu ${className}`,
     style: style,
@@ -13673,9 +14290,10 @@ const Menu = forwardRef((({children: children, className: className = "", style:
         className: "c-menu__list",
         role: "menu",
         children: React.Children.map(children, (child => {
-            if (React.isValidElement(child)) {
+            if ( React.isValidElement(child)) {
                 // Pass disabled prop down to all children if Menu is disabled
                 const childProps = child.props;
+                
                 return React.cloneElement(child, {
                     ...childProps,
                     disabled: !!disabled || childProps?.disabled
@@ -13684,7 +14302,11 @@ const Menu = forwardRef((({children: children, className: className = "", style:
             return child;
         }))
     })
-}))), MenuItem = forwardRef((({children: children, href: href = "#", icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => jsx("li", {
+})));
+
+Menu.displayName = "Menu";
+
+const MenuItem =  forwardRef((({children: children, href: href = "#", icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => jsx("li", {
     ref: ref,
     className: `c-menu__item ${active ? "is-active" : ""} ${disabled ? "is-disabled" : ""} ${className}`,
     role: "menuitem",
@@ -13708,7 +14330,12 @@ const Menu = forwardRef((({children: children, className: className = "", style:
             children: icon
         })), children ]
     })
-}))), mapIconName = luxIconName => ({
+})));
+
+MenuItem.displayName = "MenuItem";
+
+// Map icon-lux names to Phosphor icon names
+const mapIconName = luxIconName => ({
     circle: "Circle",
     "caret-down": "CaretDown",
     "caret-up": "CaretUp",
@@ -13722,11 +14349,15 @@ const Menu = forwardRef((({children: children, className: className = "", style:
     bell: "Bell",
     search: "MagnifyingGlass"
 }[luxIconName] || "Circle") // Default to Circle if no mapping found
-, MenuDivider = forwardRef((({className: className = ""}, ref) => jsx("li", {
+, MenuDivider =  forwardRef((({className: className = ""}, ref) => jsx("li", {
     ref: ref,
     className: `c-menu__divider ${className}`,
     role: "separator"
-}))), MegaMenu = forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsx("div", {
+})));
+
+MenuDivider.displayName = "MenuDivider";
+
+const MegaMenu =  forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsx("div", {
     ref: ref,
     className: `c-menu c-menu--mega ${className}`,
     style: style,
@@ -13735,9 +14366,10 @@ const Menu = forwardRef((({children: children, className: className = "", style:
         children: jsx("div", {
             className: "c-menu__grid o-grid",
             children: React.Children.map(children, (child => {
-                if (React.isValidElement(child)) {
+                if ( React.isValidElement(child)) {
                     // Pass disabled prop down to all children if MegaMenu is disabled
                     const childProps = child.props;
+                    
                     return React.cloneElement(child, {
                         ...childProps,
                         disabled: !!disabled || childProps?.disabled
@@ -13747,7 +14379,11 @@ const Menu = forwardRef((({children: children, className: className = "", style:
             }))
         })
     })
-}))), MegaMenuColumn = forwardRef((({title: title, icon: icon, children: children, width: width = "auto", className: className = "", disabled: disabled = !1}, ref) => jsxs("div", {
+})));
+
+MegaMenu.displayName = "MegaMenu";
+
+const MegaMenuColumn =  forwardRef((({title: title, icon: icon, children: children, width: width = "auto", className: className = "", disabled: disabled = !1}, ref) => jsxs("div", {
     ref: ref,
     className: `o-grid__col o-grid__col--${width} ${className}`,
     children: [ (title || icon) && jsxs("div", {
@@ -13770,13 +14406,13 @@ const Menu = forwardRef((({children: children, className: className = "", style:
         className: "c-menu__subitems-list",
         role: "menu",
         children: React.Children.map(children, (child => {
-            if (React.isValidElement(child)) {
+            if ( React.isValidElement(child)) {
                 // Pass disabled prop down to all children if column is disabled
                 const childProps = child.props;
                 return jsx("li", {
                     className: "c-menu__subitem",
                     role: "menuitem",
-                    children: React.cloneElement(child, {
+                    children:  React.cloneElement(child, {
                         ...childProps,
                         disabled: !!disabled || childProps?.disabled
                     })
@@ -13785,7 +14421,11 @@ const Menu = forwardRef((({children: children, className: className = "", style:
             return null;
         }))
     }) ]
-}))), MegaMenuLink = forwardRef((({href: href, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => jsx("a", {
+})));
+
+MegaMenuColumn.displayName = "MegaMenuColumn";
+
+const MegaMenuLink =  forwardRef((({href: href, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => jsx("a", {
     ref: ref,
     href: href,
     className: `c-menu__subitem-link ${disabled ? "is-disabled" : ""} ${className}`,
@@ -13794,7 +14434,11 @@ const Menu = forwardRef((({children: children, className: className = "", style:
     },
     "aria-disabled": disabled,
     children: children
-}))), NavDropdown = forwardRef((({title: title, children: children, alignment: alignment = "start", megaMenu: megaMenu = !1, className: className = "", style: style, disabled: disabled = !1}, ref) => {
+})));
+
+MegaMenuLink.displayName = "MegaMenuLink";
+
+const NavDropdown =  forwardRef((({title: title, children: children, alignment: alignment = "start", megaMenu: megaMenu = !1, className: className = "", style: style, disabled: disabled = !1}, ref) => {
     const {generateDropdownMenuClass: generateDropdownMenuClass, getIconName: getIconName} = useNavDropdown({
         alignment: alignment,
         megaMenu: megaMenu
@@ -14434,12 +15078,13 @@ useEffect((() => {
                 };
             }));
         }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), handleWheel = useCallback((event => {
+            var _context;
             if (!isMounted || !event || !event.currentTarget) return;
             // Additional safety check for the target element
                         const target = event.currentTarget;
             if (target && "function" == typeof target.getBoundingClientRect) {
                 // Storybook-specific safety check - ensure DOM is ready
-                if ("undefined" != typeof window && window.location?.href?.includes("storybook")) try {
+                if ("undefined" != typeof window && (null == (_context = window.location?.href) ? void 0 : Function.call.bind(_includesInstanceProperty(_context), _context))?.("storybook")) try {
                     // Test if getBoundingClientRect works before proceeding
                     const testRect = target.getBoundingClientRect();
                     if (!testRect || 0 === testRect.width || 0 === testRect.height) return;
@@ -14983,7 +15628,7 @@ useEffect((() => {
 /**
  * Hook for managing popover state and positioning logic
  */
-const PopoverContext = createContext({
+const PopoverContext =  createContext({
     isOpen: !1,
     setIsOpen: () => {},
     triggerRef: {
@@ -15168,7 +15813,7 @@ const PopoverContext = createContext({
             popoverId: popoverId,
             triggerType: trigger
         },
-        children: [ children, "undefined" != typeof document && createPortal(jsxs("div", {
+        children: [ children, "undefined" != typeof document &&  createPortal(jsxs("div", {
             ref: popoverRef,
             className: `c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ""} ${glass ? "c-popover--glass" : ""} ${className}`,
             style: style,
@@ -15215,10 +15860,7 @@ const PopoverContext = createContext({
 };
 
 // Context to share popover state between components
-/**
- * PopoverTrigger component to wrap the element that triggers the popover
- */
-forwardRef((({children: children, trigger: triggerProp}, ref) => {
+ forwardRef((({children: children, trigger: triggerProp}, ref) => {
     const {isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, popoverId: popoverId, triggerType: triggerType} = React.useContext(PopoverContext), effectiveTrigger = triggerProp || triggerType, child = React.Children.only(children), triggerProps = {
         ref: ref || triggerRef,
         "aria-describedby": popoverId,
@@ -15231,13 +15873,13 @@ forwardRef((({children: children, trigger: triggerProp}, ref) => {
         setIsOpen(!0);
     }, triggerProps.onMouseLeave = () => {
         setIsOpen(!1);
-    }), React.cloneElement(child, triggerProps);
-})), Popover.displayName = "Popover";
+    }),  React.cloneElement(child, triggerProps);
+})).displayName = "PopoverTrigger", Popover.displayName = "Popover";
 
 /**
  * Hook for managing rating component state and interactions
  */
-const Rating = forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", color: color, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
+const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", color: color, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
     const internalRef = useRef(null), ratingInstance = useRef(null), {currentValue: currentValue, hoverValue: hoverValue, focusedIndex: focusedIndex, setHoverValue: setHoverValue, setFocused: setFocused, handleKeyDown: handleKeyDown} = (({value: value = 0, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, onChange: onChange}) => {
         // Determine if component is in controlled mode
         const isControlled = void 0 !== onChange, [internalValue, setInternalValue] = useState(value), [hoverValue, setHoverValue] = useState(null), [focusedIndex, setFocusedIndex] = useState(null), currentValue = isControlled ? value : internalValue, handleMouseEnter = useCallback((starValue => {
@@ -15298,7 +15940,7 @@ const Rating = forwardRef((({value: valueProp = 0, defaultValue: defaultValue, m
         allowHalf: allowHalf,
         readOnly: readOnly,
         onChange: onChange
-    }), handleMouseEnter = useCallback(((e, starValue) => {
+    }), forkedRef = useForkRef(internalRef, ref), handleMouseEnter = useCallback(((e, starValue) => {
         if (!readOnly) if (allowHalf) {
             // Get the star element's bounding rectangle
             const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2, adjustedValue = e.clientX < starCenterX ? starValue - .5 : starValue;
@@ -15349,7 +15991,7 @@ const Rating = forwardRef((({value: valueProp = 0, defaultValue: defaultValue, m
     // If using vanilla JS, just render the container
         if (useVanillaJS) return jsx("div", {
         className: ratingClasses,
-        ref: useForkRef(internalRef, ref),
+        ref: forkedRef,
         id: id,
         ...restProps
     });
@@ -15357,7 +15999,7 @@ const Rating = forwardRef((({value: valueProp = 0, defaultValue: defaultValue, m
     // Determine the effective value (either hovered or actual)
         const effectiveValue = null !== hoverValue ? hoverValue : currentValue, ratingContent = jsx("div", {
         className: ratingClasses,
-        ref: useForkRef(internalRef, ref),
+        ref: forkedRef,
         id: id,
         style: style,
         "data-readonly": readOnly ? "true" : "false",
@@ -15562,7 +16204,7 @@ ProductReview.displayName = "ProductReview";
 /**
  * Hook for managing Progress component state and behavior
  */
-const Progress = forwardRef((({value: value, variant: variant = "primary", size: size = "md", className: className = "", style: style, disabled: disabled = !1, ariaLabel: ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL, glass: glass}, ref) => {
+const Progress =  memo( forwardRef((({value: value, variant: variant = "primary", size: size = "md", className: className = "", style: style, disabled: disabled = !1, ariaLabel: ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL, glass: glass}, ref) => {
     const {progressValue: progressValue, progressStyle: progressStyle, progressClasses: progressClasses} = (({value: value, variant: variant = "primary", size: size = "md", className: className = ""}) => {
         // Clamp value between 0 and 100
         const progressValue = Math.min(Math.max(value, 0), 100), baseClass = "c-progress";
@@ -15612,7 +16254,14 @@ const Progress = forwardRef((({value: value, variant: variant = "primary", size:
         });
     }
     return progressContent;
-})), River = ({title: title, text: text, actions: actions, imageSrc: imageSrc, imageAlt: imageAlt = "Image", center: center = !1, breakout: breakout = !1, reverse: reverse = !1, contentColumns: contentColumns, backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, contentWidth: contentWidth, className: className = "", style: style}) => {
+})));
+
+Progress.displayName = "Progress";
+
+/**
+ * River component for displaying content with image sections
+ */
+const River = ({title: title, text: text, actions: actions, imageSrc: imageSrc, imageAlt: imageAlt = "Image", center: center = !1, breakout: breakout = !1, reverse: reverse = !1, contentColumns: contentColumns, backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, contentWidth: contentWidth, className: className = "", style: style}) => {
     const {generateRiverClassNames: generateRiverClassNames, generateContentClass: generateContentClass, generateVisualClass: generateVisualClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, textContent: textContent} = useRiver({
         title: title,
         text: text,
@@ -15790,9 +16439,22 @@ const SectionIntro = ({title: title, label: label, text: text, actions: actions,
 
 SectionIntro.displayName = "SectionIntro";
 
-const Slider = 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;
-    if (!slides || 0 === slides.length) return jsx("div", {
+const Slider =  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, slider = useSlider({
+        slides: slides || [],
+        slidesToShow: slidesToShow,
+        spaceBetween: spaceBetween,
+        loop: loop,
+        initialSlide: initialSlide,
+        direction: direction,
+        speed: speed,
+        allowTouchMove: allowTouchMove,
+        threshold: threshold,
+        autoplay: autoplay,
+        onSlideChange: onSlideChange
+    }), {containerRef: containerRef, wrapperRef: wrapperRef, allSlides: allSlides, realIndex: realIndex, translateValue: translateValue, slideWidth: slideWidth, transitioning: transitioning, touching: touching, slideNext: slideNext, slidePrev: slidePrev, goToSlide: goToSlide, canSlideNext: canSlideNext, canSlidePrev: canSlidePrev, handleTouchStart: handleTouchStart, handleTouchMove: handleTouchMove, handleTouchEnd: handleTouchEnd, loopedSlides: loopedSlides} = slider, totalWrapperWidth = useMemo((() => 0 === slideWidth ? 0 : allSlides.length * (slideWidth + spaceBetween) - spaceBetween), [ allSlides.length, slideWidth, spaceBetween ]);
+    // Hooks must be called unconditionally - before early return
+        if (!slides || 0 === slides.length) return jsx("div", {
         className: "c-slider c-slider--empty",
         style: {
             height: height,
@@ -15804,19 +16466,7 @@ const Slider = forwardRef(((props, ref) => {
             children: "No slides available"
         })
     });
-    const slider = useSlider({
-        slides: slides,
-        slidesToShow: slidesToShow,
-        spaceBetween: spaceBetween,
-        loop: loop,
-        initialSlide: initialSlide,
-        direction: direction,
-        speed: speed,
-        allowTouchMove: allowTouchMove,
-        threshold: threshold,
-        autoplay: autoplay,
-        onSlideChange: onSlideChange
-    }), {containerRef: containerRef, wrapperRef: wrapperRef, allSlides: allSlides, realIndex: realIndex, translateValue: translateValue, slideWidth: slideWidth, transitioning: transitioning, touching: touching, slideNext: slideNext, slidePrev: slidePrev, goToSlide: goToSlide, canSlideNext: canSlideNext, canSlidePrev: canSlidePrev, handleTouchStart: handleTouchStart, handleTouchMove: handleTouchMove, handleTouchEnd: handleTouchEnd, loopedSlides: loopedSlides} = slider, totalWrapperWidth = useMemo((() => 0 === slideWidth ? 0 : allSlides.length * (slideWidth + spaceBetween) - spaceBetween), [ allSlides.length, slideWidth, spaceBetween ]), containerClasses = [ "c-slider", "vertical" === direction && "c-slider--vertical", grabCursor && "c-slider--grab-cursor", touching && "c-slider--grabbing", loop && "c-slider--loop", className ].filter(Boolean).join(" ");
+    const containerClasses = [ "c-slider", "vertical" === direction && "c-slider--vertical", grabCursor && "c-slider--grab-cursor", touching && "c-slider--grabbing", loop && "c-slider--loop", className ].filter(Boolean).join(" ");
     return jsxs("div", {
         ref: ref || containerRef,
         className: containerClasses,
@@ -15982,7 +16632,7 @@ Steps.displayName = "Steps";
 /**
  * Tabs component for switching between different content panels
  */
-const Tabs = ({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass}) => {
+const Tabs =  memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass}) => {
     const [currentTab, setCurrentTab] = useState(activeIndex), tabContent = jsxs("div", {
         className: `c-tabs js-atomix-tab ${className}`,
         style: style,
@@ -16043,7 +16693,7 @@ const Tabs = ({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDE
         });
     }
     return tabContent;
-};
+}));
 
 Tabs.displayName = "Tabs";
 
@@ -16207,13 +16857,12 @@ const Todo = ({items: items = [], title: title = "Todo List", onAddTodo: onAddTo
                             type: "checkbox",
                             className: "c-todo__checkbox c-checkbox",
                             checked: item.completed,
-                            onChange: () => {
-                                return id = item.id, void (disabled || (setLocalItems((prevItems => prevItems.map((item => item.id === id ? {
+                            onChange: () => (id => {
+                                disabled || (setLocalItems((prevItems => prevItems.map((item => item.id === id ? {
                                     ...item,
                                     completed: !item.completed
-                                } : item)))), onToggleTodo && onToggleTodo(id)));
-                                var id;
-                            },
+                                } : item)))), onToggleTodo && onToggleTodo(id));
+                            })(item.id),
                             disabled: disabled,
                             "aria-label": `Mark "${item.text}" as ${item.completed ? "incomplete" : "complete"}`
                         }), jsx("span", {
@@ -16223,11 +16872,10 @@ const Todo = ({items: items = [], title: title = "Todo List", onAddTodo: onAddTo
                     }), jsx("button", {
                         type: "button",
                         className: "c-todo__delete-btn c-btn c-btn--error c-btn--sm",
-                        onClick: () => {
-                            return id = item.id, void (disabled || (setLocalItems((prevItems => prevItems.filter((item => item.id !== id)))), 
-                            onDeleteTodo && onDeleteTodo(id)));
-                            var id;
-                        },
+                        onClick: () => (id => {
+                            disabled || (setLocalItems((prevItems => prevItems.filter((item => item.id !== id)))), 
+                            onDeleteTodo && onDeleteTodo(id));
+                        })(item.id),
                         disabled: disabled,
                         "aria-label": `Delete "${item.text}"`,
                         children: jsx(Icon, {
@@ -16293,7 +16941,7 @@ Toggle.displayName = "Toggle";
 /**
  * Calculate tooltip and arrow positions based on trigger and tooltip dimensions
  */
-const Tooltip = ({content: content, children: children, position: position = TOOLTIP.DEFAULTS.POSITION, trigger: trigger = TOOLTIP.DEFAULTS.TRIGGER, className: className = "", style: style, delay: delay = TOOLTIP.DEFAULTS.DELAY, offset: offset = TOOLTIP.DEFAULTS.OFFSET, glass: glass}) => {
+const Tooltip =  memo((({content: content, children: children, position: position = TOOLTIP.DEFAULTS.POSITION, trigger: trigger = TOOLTIP.DEFAULTS.TRIGGER, className: className = "", style: style, delay: delay = TOOLTIP.DEFAULTS.DELAY, offset: offset = TOOLTIP.DEFAULTS.OFFSET, glass: glass}) => {
     const {isVisible: isVisible, isPositioned: isPositioned, tooltipId: tooltipId, triggerRef: triggerRef, tooltipRef: tooltipRef, tooltipStyle: tooltipStyle, arrowStyle: arrowStyle, triggerProps: triggerProps, wrapperProps: wrapperProps} = (({position: position = "top", trigger: trigger = "hover", offset: offset = 10, delay: delay = 200}) => {
         const [isVisible, setIsVisible] = useState(!1), [isPositioned, setIsPositioned] = useState(!1), [tooltipStyle, setTooltipStyle] = useState({}), [arrowStyle, setArrowStyle] = useState({}), timeoutRef = useRef(null), triggerRef = useRef(null), tooltipRef = useRef(null), tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`, showTooltip = useCallback((() => {
             timeoutRef.current && clearTimeout(timeoutRef.current), delay > 0 ? timeoutRef.current = setTimeout((() => {
@@ -16470,7 +17118,7 @@ const Tooltip = ({content: content, children: children, position: position = TOO
             })()
         }) ]
     });
-};
+}));
 
 /**
  * Get arrow size from CSS custom property
@@ -16633,13 +17281,14 @@ Upload.displayName = "Upload";
 /**
  * Advanced Video Player Component
  */
-const VideoPlayer = forwardRef((({src: src, type: type = "video", youtubeId: youtubeId, poster: poster, autoplay: autoplay = !1, loop: loop = !1, muted: muted = !1, controls: controls = !0, preload: preload = "metadata", width: width, height: height, aspectRatio: aspectRatio = "16:9", className: className = "", onPlay: onPlay, onPause: onPause, onEnded: onEnded, onTimeUpdate: onTimeUpdate, onVolumeChange: onVolumeChange, onFullscreenChange: onFullscreenChange, onError: onError, showDownload: showDownload = !1, showShare: showShare = !1, showSettings: showSettings = !0, playbackRates: playbackRates = [ .5, .75, 1, 1.25, 1.5, 2 ], subtitles: subtitles, quality: quality, ambientMode: ambientMode = !1, glass: glass = !1, glassOpacity: glassOpacity = 1, glassContent: glassContent, style: style, ...props}, ref) => {
+const VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: youtubeId, poster: poster, autoplay: autoplay = !1, loop: loop = !1, muted: muted = !1, controls: controls = !0, preload: preload = "metadata", width: width, height: height, aspectRatio: aspectRatio = "16:9", className: className = "", onPlay: onPlay, onPause: onPause, onEnded: onEnded, onTimeUpdate: onTimeUpdate, onVolumeChange: onVolumeChange, onFullscreenChange: onFullscreenChange, onError: onError, showDownload: showDownload = !1, showShare: showShare = !1, showSettings: showSettings = !0, playbackRates: playbackRates = [ .5, .75, 1, 1.25, 1.5, 2 ], subtitles: subtitles, quality: quality, ambientMode: ambientMode = !1, glass: glass = !1, glassOpacity: glassOpacity = 1, glassContent: glassContent, style: style, ...props}, ref) => {
     const videoRef = useRef(null), containerRef = useRef(null), canvasRef = useRef(null), iframeRef = useRef(null), [containerBorderRadius, setContainerBorderRadius] = useState(8), isYouTube = "youtube" === type || youtubeId || src && isYouTubeUrl(src), videoId = youtubeId || (isYouTube && src ? extractYouTubeId(src) : null), {isPlaying: isPlaying, currentTime: currentTime, duration: duration, volume: volume, isMuted: isMuted, isFullscreen: isFullscreen, isLoading: isLoading, playbackRate: playbackRate, currentQuality: currentQuality, showControls: showControls, play: play, pause: pause, togglePlay: togglePlay, seek: seek, setVolume: setVolume, toggleMute: toggleMute, toggleFullscreen: toggleFullscreen, togglePictureInPicture: togglePictureInPicture, setPlaybackRate: setPlaybackRate, setQuality: setQuality, formatTime: formatTime, getProgressPercentage: getProgressPercentage, getBufferedPercentage: getBufferedPercentage} = function({videoRef: videoRef, containerRef: containerRef, onPlay: onPlay, onPause: onPause, onEnded: onEnded, onTimeUpdate: onTimeUpdate, onVolumeChange: onVolumeChange, onFullscreenChange: onFullscreenChange, onError: onError, playbackRates: playbackRates = [ .5, .75, 1, 1.25, 1.5, 2 ], quality: quality}) {
         const [isPlaying, setIsPlaying] = useState(!1), [currentTime, setCurrentTime] = useState(0), [duration, setDuration] = useState(0), [volume, setVolumeState] = useState(1), [isMuted, setIsMuted] = useState(!1), [isFullscreen, setIsFullscreen] = useState(!1), [isPictureInPicture, setIsPictureInPicture] = useState(!1), [isLoading, setIsLoading] = useState(!1), [buffered, setBuffered] = useState(0), [playbackRate, setPlaybackRateState] = useState(1), [currentQuality, setCurrentQuality] = useState(quality?.[0] || null), [showControls, setShowControls] = useState(!0), controlsTimeoutRef = useRef(null), resetControlsTimeout = useCallback((() => {
-            controlsTimeoutRef.current && clearTimeout(controlsTimeoutRef.current), setShowControls(!0), 
-            controlsTimeoutRef.current = setTimeout((() => {
+            controlsTimeoutRef.current && clearTimeout(controlsTimeoutRef.current), setShowControls(!0);
+            const timeout = setTimeout((() => {
                 isPlaying && setShowControls(!1);
             }), 3e3);
+            controlsTimeoutRef.current = timeout;
         }), [ isPlaying ]), play = useCallback((async () => {
             if (videoRef.current) try {
                 await videoRef.current.play(), setIsPlaying(!0), onPlay?.();
@@ -16674,7 +17323,7 @@ const VideoPlayer = forwardRef((({src: src, type: type = "video", youtubeId: you
                 console.error("Picture-in-picture error:", error);
             }
         }), [ videoRef, isPictureInPicture ]), setPlaybackRate = useCallback((rate => {
-            videoRef.current && playbackRates.includes(rate) && (videoRef.current.playbackRate = rate, 
+            videoRef.current && _includesInstanceProperty(playbackRates).call(playbackRates, rate) && (videoRef.current.playbackRate = rate, 
             setPlaybackRateState(rate));
         }), [ videoRef, playbackRates ]), setQuality = useCallback((newQuality => {
             if (videoRef.current && quality) {
@@ -17506,41 +18155,37 @@ function validateConfig(config) {
         function(themes) {
             const errors = [], warnings = [];
             0 === Object.keys(themes).length && warnings.push("No themes defined in configuration");
-            for (const [themeId, theme] of Object.entries(themes)) 
-            // Validate theme ID
-            if (themeId && "string" == typeof themeId) 
-            // Validate theme object
-            if (theme && "object" == typeof theme) 
-            // Validate theme type
-            if (!theme.type || "css" !== theme.type && "js" !== theme.type) errors.push(`Theme "${themeId}" must have type "css" or "js"`); else {
-                // Validate CSS theme
-                if (
-                // Validate required fields
-                theme.name && "string" == typeof theme.name || errors.push(`Theme "${themeId}" must have a "name" string`), 
-                "css" === theme.type) {
-                    const cssErrors = validateCSSTheme();
-                    errors.push(...cssErrors.errors), warnings.push(...cssErrors.warnings);
-                }
-                // Validate JS theme
-                                if ("js" === theme.type) {
-                    const jsErrors = validateJSTheme(themeId, theme);
-                    errors.push(...jsErrors.errors), warnings.push(...jsErrors.warnings);
-                }
-                // Validate metadata
-                                theme.version && (version = theme.version, !/^\d+\.\d+\.\d+(-[\w.]+)?(\+[\w.]+)?$/.test(version)) && warnings.push(`Theme "${themeId}" has invalid version format: ${theme.version}`), 
-                theme.status && ![ "stable", "beta", "experimental", "deprecated" ].includes(theme.status) && warnings.push(`Theme "${themeId}" has invalid status: ${theme.status}`), 
-                // Validate color format
-                theme.color && !isValidColor(theme.color) && warnings.push(`Theme "${themeId}" has invalid color format: ${theme.color}`), 
-                // Validate accessibility
-                theme.a11y && theme.a11y.contrastTarget && (theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21) && warnings.push(`Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`);
-            } else errors.push(`Theme "${themeId}" must be an object`); else errors.push(`Invalid theme ID: ${themeId}`);
-            /**
- * Check if string is valid semver
- */
-            var version;
-            /**
- * Check if string is valid color
- */            return {
+            for (const [themeId, theme] of Object.entries(themes)) {
+                var _context;
+                // Validate theme ID
+                                if (themeId && "string" == typeof themeId) 
+                // Validate theme object
+                if (theme && "object" == typeof theme) 
+                // Validate theme type
+                if (!theme.type || "css" !== theme.type && "js" !== theme.type) errors.push(`Theme "${themeId}" must have type "css" or "js"`); else {
+                    // Validate CSS theme
+                    if (
+                    // Validate required fields
+                    theme.name && "string" == typeof theme.name || errors.push(`Theme "${themeId}" must have a "name" string`), 
+                    "css" === theme.type) {
+                        const cssErrors = validateCSSTheme();
+                        errors.push(...cssErrors.errors), warnings.push(...cssErrors.warnings);
+                    }
+                    // Validate JS theme
+                                        if ("js" === theme.type) {
+                        const jsErrors = validateJSTheme(themeId, theme);
+                        errors.push(...jsErrors.errors), warnings.push(...jsErrors.warnings);
+                    }
+                    // Validate metadata
+                                        theme.version && !isValidSemver(theme.version) && warnings.push(`Theme "${themeId}" has invalid version format: ${theme.version}`), 
+                    theme.status && !_includesInstanceProperty(_context = [ "stable", "beta", "experimental", "deprecated" ]).call(_context, theme.status) && warnings.push(`Theme "${themeId}" has invalid status: ${theme.status}`), 
+                    // Validate color format
+                    theme.color && !isValidColor(theme.color) && warnings.push(`Theme "${themeId}" has invalid color format: ${theme.color}`), 
+                    // Validate accessibility
+                    theme.a11y && theme.a11y.contrastTarget && (theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21) && warnings.push(`Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`);
+                } else errors.push(`Theme "${themeId}" must be an object`); else errors.push(`Invalid theme ID: ${themeId}`);
+            }
+            return {
                 valid: 0 === errors.length,
                 errors: errors,
                 warnings: warnings
@@ -17560,9 +18205,10 @@ function validateConfig(config) {
  */
         function(build) {
             const errors = [], warnings = [];
+            var _context2;
             return build.output && "object" == typeof build.output ? (build.output.directory && "string" == typeof build.output.directory || errors.push('Build output must have a "directory" string'), 
             build.output.formats && "object" == typeof build.output.formats || errors.push('Build output must have a "formats" object')) : errors.push('Build config must have an "output" object'), 
-            build.sass && "object" == typeof build.sass ? build.sass.style && ![ "expanded", "compressed", "compact", "nested" ].includes(build.sass.style) && warnings.push(`Invalid Sass style: ${build.sass.style}`) : errors.push('Build config must have a "sass" object'), 
+            build.sass && "object" == typeof build.sass ? build.sass.style && !_includesInstanceProperty(_context2 = [ "expanded", "compressed", "compact", "nested" ]).call(_context2, build.sass.style) && warnings.push(`Invalid Sass style: ${build.sass.style}`) : errors.push('Build config must have a "sass" object'), 
             {
                 valid: 0 === errors.length,
                 errors: errors,
@@ -17626,7 +18272,10 @@ function validateConfig(config) {
                 errors: errors,
                 warnings: warnings
             };
-        }(config.dependencies, config.themes || {});
+        }
+        /**
+ * Check if string is valid semver
+ */ (config.dependencies, config.themes || {});
         errors.push(...depErrors.errors), warnings.push(...depErrors.warnings);
     }
     return {
@@ -17660,13 +18309,22 @@ function validateCSSTheme(themeId, theme) {
     };
 }
 
-function isValidColor(color) {
+function isValidSemver(version) {
+    return /^\d+\.\d+\.\d+(-[\w.]+)?(\+[\w.]+)?$/.test(version);
+}
+
+/**
+ * Check if string is valid color
+ */ function isValidColor(color) {
     // Hex color
-    return !!/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color) || (
+    if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color)) return !0;
     // RGB/RGBA
-    !!/^rgba?\(/.test(color) || (
+        if (/^rgba?\(/.test(color)) return !0;
     // HSL/HSLA
-    !!/^hsla?\(/.test(color) || !![ "black", "white", "red", "green", "blue", "yellow", "cyan", "magenta", "transparent", "currentColor" ].includes(color.toLowerCase())));
+        if (/^hsla?\(/.test(color)) return !0;
+    // Named colors (basic check)
+        const namedColors = [ "black", "white", "red", "green", "blue", "yellow", "cyan", "magenta", "transparent", "currentColor" ];
+    return !!_includesInstanceProperty(namedColors).call(namedColors, color.toLowerCase());
 }
 
 /**
@@ -17715,8 +18373,8 @@ class ThemeError extends Error {
         Error.captureStackTrace && Error.captureStackTrace(this, ThemeError);
     }
     /**
-     * Convert error to JSON for logging
-     */    toJSON() {
+   * Convert error to JSON for logging
+   */    toJSON() {
         return {
             name: this.name,
             message: this.message,
@@ -17753,8 +18411,8 @@ class ThemeLogger {
         };
     }
     /**
-     * Log an error
-     */    error(message, error, context) {
+   * Log an error
+   */    error(message, error, context) {
         if (this.config.level < LogLevel.ERROR) return;
         const errorObj = error instanceof Error ? error : new Error(message), themeError = error instanceof ThemeError ? error : new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
         this.config.enableConsole && console.error(`[ThemeError] ${message}`, {
@@ -17767,20 +18425,20 @@ class ThemeLogger {
         }), this.config.onError?.(themeError, context);
     }
     /**
-     * Log a warning
-     */    warn(message, context) {
+   * Log a warning
+   */    warn(message, context) {
         this.config.level < LogLevel.WARN || (this.config.enableConsole && console.warn(`[ThemeWarning] ${message}`, context || {}), 
         this.config.onWarn?.(message, context));
     }
     /**
-     * Log an info message
-     */    info(message, context) {
+   * Log an info message
+   */    info(message, context) {
         this.config.level < LogLevel.INFO || (this.config.enableConsole && console.info(`[ThemeInfo] ${message}`, context || {}), 
         this.config.onInfo?.(message, context));
     }
     /**
-     * Log a debug message
-     */    debug(message, context) {
+   * Log a debug message
+   */    debug(message, context) {
         this.config.level < LogLevel.DEBUG || (this.config.enableConsole, this.config.onDebug?.(message, context));
     }
 }
@@ -17923,11 +18581,6 @@ class ThemeLogger {
         /**
  * Theme Registry
  *
- * Central registry for all themes with discovery and dependency management
- */
-        /**
- * Theme Registry
- *
  * Manages theme registration, discovery, and dependency resolution
  */ (processedConfig, env);
         // Validate if requested
@@ -17990,8 +18643,8 @@ class ThemeRegistry {
         this.entries = new Map, this.config = null, this.initialized = !1;
     }
     /**
-     * Initialize registry from config
-     */    async initialize(config) {
+   * Initialize registry from config
+   */    async initialize(config) {
         if (!this.initialized) {
             // Load config if not provided
             if (config) this.config = config; else try {
@@ -18041,8 +18694,8 @@ class ThemeRegistry {
         }
     }
     /**
-     * Register a theme
-     */    register(themeId, definition) {
+   * Register a theme
+   */    register(themeId, definition) {
         // Get dependencies from config or definition
         const entry = {
             id: themeId,
@@ -18054,23 +18707,23 @@ class ThemeRegistry {
         this.entries.set(themeId, entry);
     }
     /**
-     * Get theme entry
-     */    get(themeId) {
+   * Get theme entry
+   */    get(themeId) {
         return this.entries.get(themeId);
     }
     /**
-     * Check if theme exists
-     */    has(themeId) {
+   * Check if theme exists
+   */    has(themeId) {
         return this.entries.has(themeId);
     }
     /**
-     * Get all theme IDs
-     */    getAllIds() {
+   * Get all theme IDs
+   */    getAllIds() {
         return Array.from(this.entries.keys());
     }
     /**
-     * Get all theme metadata
-     */    getAllMetadata() {
+   * Get all theme metadata
+   */    getAllMetadata() {
         return Array.from(this.entries.values()).map((entry => ({
             id: entry.id,
             name: entry.definition.name,
@@ -18089,34 +18742,34 @@ class ThemeRegistry {
         })));
     }
     /**
-     * Get theme definition
-     */    getDefinition(themeId) {
+   * Get theme definition
+   */    getDefinition(themeId) {
         return this.entries.get(themeId)?.definition;
     }
     /**
-     * Get theme object (for JS themes)
-     */    getTheme(themeId) {
+   * Get theme object (for JS themes)
+   */    getTheme(themeId) {
         return this.entries.get(themeId)?.theme;
     }
     /**
-     * Set theme object (for JS themes)
-     */    setTheme(themeId, theme) {
+   * Set theme object (for JS themes)
+   */    setTheme(themeId, theme) {
         const entry = this.entries.get(themeId);
         entry && (entry.theme = theme, entry.loaded = !0);
     }
     /**
-     * Get dependencies for a theme
-     */    getDependencies(themeId) {
+   * Get dependencies for a theme
+   */    getDependencies(themeId) {
         return this.entries.get(themeId)?.dependencies || [];
     }
     /**
-     * Get dependents for a theme (themes that depend on this one)
-     */    getDependents(themeId) {
+   * Get dependents for a theme (themes that depend on this one)
+   */    getDependents(themeId) {
         return this.entries.get(themeId)?.dependents || [];
     }
     /**
-     * Resolve all dependencies in correct order
-     */    resolveDependencyOrder(themeId) {
+   * Resolve all dependencies in correct order
+   */    resolveDependencyOrder(themeId) {
         const resolved = [], visited = new Set, visiting = new Set, visit = id => {
             if (visiting.has(id)) throw new Error(`Circular dependency detected involving theme: ${id}`);
             if (visited.has(id)) return;
@@ -18131,17 +18784,18 @@ class ThemeRegistry {
         return visit(themeId), resolved;
     }
     /**
-     * Resolve dependencies and build dependency graph
-     */    resolveDependencies() {
+   * Resolve dependencies and build dependency graph
+   */    resolveDependencies() {
         // Build dependents map
         for (const entry of this.entries.values()) for (const dep of entry.dependencies) {
             const depEntry = this.entries.get(dep);
-            depEntry && (depEntry.dependents.includes(entry.id) || depEntry.dependents.push(entry.id));
+            var _context;
+            depEntry && (_includesInstanceProperty(_context = depEntry.dependents).call(_context, entry.id) || depEntry.dependents.push(entry.id));
         }
     }
     /**
-     * Validate all themes
-     */    validate() {
+   * Validate all themes
+   */    validate() {
         const errors = [];
         // Check for circular dependencies
                 for (const themeId of this.entries.keys()) try {
@@ -18157,8 +18811,8 @@ class ThemeRegistry {
         };
     }
     /**
-     * Clear registry
-     */    clear() {
+   * Clear registry
+   */    clear() {
         this.entries.clear(), this.config = null, this.initialized = !1;
     }
 }
@@ -18189,8 +18843,8 @@ class ThemeRegistry {
         };
     }
     /**
-     * Get cached CSS theme
-     */    getCSS(themeId) {
+   * Get cached CSS theme
+   */    getCSS(themeId) {
         if (!this.config.enabled) return null;
         const entry = this.cache.get(themeId);
         return entry && "css" === entry.type ? 
@@ -18201,8 +18855,8 @@ class ThemeRegistry {
         this.updateAccessOrder(themeId), entry) : null;
     }
     /**
-     * Get cached JS theme
-     */    getJS(themeId) {
+   * Get cached JS theme
+   */    getJS(themeId) {
         if (!this.config.enabled) return null;
         const entry = this.cache.get(themeId);
         return entry && "js" === entry.type ? 
@@ -18213,8 +18867,8 @@ class ThemeRegistry {
         this.updateAccessOrder(themeId), entry) : null;
     }
     /**
-     * Set CSS theme cache entry
-     */    setCSS(themeId, entry) {
+   * Set CSS theme cache entry
+   */    setCSS(themeId, entry) {
         if (!this.config.enabled) return;
         // Evict if needed
                 this.evictIfNeeded();
@@ -18230,8 +18884,8 @@ class ThemeRegistry {
         this.cache.set(themeId, cacheEntry), this.updateAccessOrder(themeId);
     }
     /**
-     * Set JS theme cache entry
-     */    setJS(themeId, theme) {
+   * Set JS theme cache entry
+   */    setJS(themeId, theme) {
         if (!this.config.enabled) return;
         // Evict if needed
                 this.evictIfNeeded();
@@ -18245,8 +18899,8 @@ class ThemeRegistry {
         this.cache.set(themeId, cacheEntry), this.updateAccessOrder(themeId);
     }
     /**
-     * Check if theme is cached
-     */    has(themeId) {
+   * Check if theme is cached
+   */    has(themeId) {
         if (!this.config.enabled) return !1;
         const entry = this.cache.get(themeId);
         return !!entry && (
@@ -18255,19 +18909,19 @@ class ThemeRegistry {
         this.removeFromAccessOrder(themeId), !1));
     }
     /**
-     * Remove theme from cache
-     */    delete(themeId) {
+   * Remove theme from cache
+   */    delete(themeId) {
         const deleted = this.cache.delete(themeId);
         return deleted && this.removeFromAccessOrder(themeId), deleted;
     }
     /**
-     * Clear all cache
-     */    clear() {
+   * Clear all cache
+   */    clear() {
         this.cache.clear(), this.accessOrder = [];
     }
     /**
-     * Get cache statistics
-     */    getStats() {
+   * Get cache statistics
+   */    getStats() {
         let cssThemes = 0, jsThemes = 0;
         for (const entry of this.cache.values()) "css" === entry.type ? cssThemes++ : jsThemes++;
         return {
@@ -18278,19 +18932,19 @@ class ThemeRegistry {
         };
     }
     /**
-     * Update access order for LRU
-     */    updateAccessOrder(themeId) {
+   * Update access order for LRU
+   */    updateAccessOrder(themeId) {
         this.removeFromAccessOrder(themeId), this.accessOrder.push(themeId);
     }
     /**
-     * Remove from access order
-     */    removeFromAccessOrder(themeId) {
+   * Remove from access order
+   */    removeFromAccessOrder(themeId) {
         const index = this.accessOrder.indexOf(themeId);
         index > -1 && this.accessOrder.splice(index, 1);
     }
     /**
-     * Evict least recently used entries if cache is full
-     */    evictIfNeeded() {
+   * Evict least recently used entries if cache is full
+   */    evictIfNeeded() {
         if (!(this.cache.size < this.config.maxSize)) 
         // Evict least recently used (first in access order)
         for (;this.cache.size >= this.config.maxSize && this.accessOrder.length > 0; ) {
@@ -18418,8 +19072,8 @@ function isJSTheme(theme) {
  * Validates themes for correctness and accessibility
  */ class ThemeValidator {
     /**
-     * Validate theme
-     */
+   * Validate theme
+   */
     validate(theme, metadata) {
         const errors = [], warnings = [], a11yIssues = [], paletteResult = this.validatePalette(theme.palette, metadata);
         errors.push(...paletteResult.errors), warnings.push(...paletteResult.warnings), 
@@ -18453,8 +19107,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Validate palette
-     */    validatePalette(palette, metadata) {
+   * Validate palette
+   */    validatePalette(palette, metadata) {
         const errors = [], warnings = [], a11yIssues = [], contrastTarget = metadata?.a11y?.contrastTarget || 4.5;
         // Validate primary color contrast
         if (palette.primary) {
@@ -18498,8 +19152,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Validate typography
-     */    validateTypography(typography) {
+   * Validate typography
+   */    validateTypography(typography) {
         const errors = [], warnings = [];
         return typography.fontFamily && "string" == typeof typography.fontFamily || errors.push("Typography must have a fontFamily"), 
         (!typography.fontSize || "number" != typeof typography.fontSize || typography.fontSize <= 0) && errors.push("Typography must have a valid fontSize"), 
@@ -18513,8 +19167,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Validate spacing
-     */    validateSpacing(spacing) {
+   * Validate spacing
+   */    validateSpacing(spacing) {
         const errors = [];
         if ("function" != typeof spacing) errors.push("Spacing must be a function"); else 
         // Test spacing function
@@ -18531,8 +19185,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Validate breakpoints
-     */    validateBreakpoints(breakpoints) {
+   * Validate breakpoints
+   */    validateBreakpoints(breakpoints) {
         const errors = [], warnings = [];
         if (breakpoints.values) {
             const required = [ "xs", "sm", "md", "lg", "xl" ];
@@ -18555,8 +19209,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Check color contrast ratio
-     */    checkContrast(foreground, background) {
+   * Check color contrast ratio
+   */    checkContrast(foreground, background) {
         try {
             return getContrastRatio(foreground, background);
         } catch {
@@ -18564,15 +19218,15 @@ function isJSTheme(theme) {
         }
     }
     /**
-     * Check if color is valid
-     */    isValidColor(color) {
+   * Check if color is valid
+   */    isValidColor(color) {
         // Hex
         return !!/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color) || !!/^rgba?\(/.test(color) || !!/^hsla?\(/.test(color);
         // RGB/RGBA
         }
     /**
-     * Validate transitions
-     */    validateTransitions(transitions) {
+   * Validate transitions
+   */    validateTransitions(transitions) {
         const errors = [], warnings = [], a11yIssues = [];
         if (!transitions) return errors.push("Transitions configuration is required"), {
             valid: !1,
@@ -18604,8 +19258,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Validate z-index
-     */    validateZIndex(zIndex) {
+   * Validate z-index
+   */    validateZIndex(zIndex) {
         const errors = [], warnings = [], a11yIssues = [];
         if (!zIndex) return errors.push("Z-index configuration is required"), {
             valid: !1,
@@ -18616,7 +19270,9 @@ function isJSTheme(theme) {
         const numericEntries = Object.entries(zIndex).filter((([, value]) => "number" == typeof value));
         for (const [key, value] of Object.entries(zIndex)) void 0 !== value && ("number" != typeof value ? errors.push(`Z-index ${key} must be a number, got ${typeof value}`) : value < 0 ? errors.push(`Z-index ${key} must be non-negative, got ${value}`) : value > 1e4 && warnings.push(`Z-index ${key} (${value}) exceeds recommended maximum (10000)`));
         for (let i = 0; i < numericEntries.length; i++) for (let j = i + 1; j < numericEntries.length; j++) {
-            const [keyA, valueA] = numericEntries[i], [keyB, valueB] = numericEntries[j], diff = Math.abs(valueA - valueB);
+            const entryA = numericEntries[i], entryB = numericEntries[j];
+            if (!entryA || !entryB) continue;
+            const [keyA, valueA] = entryA, [keyB, valueB] = entryB, diff = Math.abs(valueA - valueB);
             diff < 10 && diff > 0 && warnings.push(`Z-index values ${keyA} (${valueA}) and ${keyB} (${valueB}) are very close, potential layering conflicts`);
         }
         return {
@@ -18627,8 +19283,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Validate border radius
-     */    validateBorderRadius(borderRadius) {
+   * Validate border radius
+   */    validateBorderRadius(borderRadius) {
         const errors = [], warnings = [], a11yIssues = [];
         if (!borderRadius) return errors.push("Border radius configuration is required"), 
         {
@@ -18674,8 +19330,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Validate custom properties
-     */    validateCustom(custom) {
+   * Validate custom properties
+   */    validateCustom(custom) {
         const errors = [], warnings = [], a11yIssues = [];
         if (!custom || "object" != typeof custom) return {
             valid: !0,
@@ -18732,7 +19388,7 @@ function isJSTheme(theme) {
  * Convert a nested object to flat CSS variable declarations
  */ function flattenObject(obj, prefix = "", result = {}) {
     for (const key in obj) {
-        if (!obj.hasOwnProperty(key)) continue;
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
         const value = obj[key], newKey = prefix ? `${prefix}-${key}` : key;
         if (value && "object" == typeof value && !Array.isArray(value)) {
             // Skip special objects like functions
@@ -19232,28 +19888,28 @@ function generateCSSVariables(theme, options = {}) {
         };
     }
     /**
-     * Initialize engine with theme registry
-     */    async initialize() {
+   * Initialize engine with theme registry
+   */    async initialize() {
         await this.registry.initialize();
     }
     /**
-     * Get current theme ID
-     */    getCurrentTheme() {
+   * Get current theme ID
+   */    getCurrentTheme() {
         return this.currentTheme;
     }
     /**
-     * Get active theme object
-     */    getActiveTheme() {
+   * Get active theme object
+   */    getActiveTheme() {
         return this.activeTheme;
     }
     /**
-     * Check if theme is loaded
-     */    isThemeLoaded(themeId) {
+   * Check if theme is loaded
+   */    isThemeLoaded(themeId) {
         return this.loadedThemes.has(themeId);
     }
     /**
-     * Load and apply theme
-     */    async setTheme(themeId, options = {}) {
+   * Load and apply theme
+   */    async setTheme(themeId, options = {}) {
         const {force: force = !1, preload: preload = !1, removePrevious: removePrevious = !0, fallbackOnError: fallbackOnError = !0} = options;
         // Handle Theme object directly
                 if ("string" != typeof themeId) {
@@ -19318,16 +19974,16 @@ function generateCSSVariables(theme, options = {}) {
         }
     }
     /**
-     * Load theme (CSS or JS)
-     */    async loadTheme(themeId, options) {
+   * Load theme (CSS or JS)
+   */    async loadTheme(themeId, options) {
         const definition = this.registry.getDefinition(themeId);
         if (!definition) throw new Error(`Theme definition not found: ${themeId}`);
         "css" === definition.type ? await this.loadCSSTheme(themeId, definition, options) : await this.loadJSTheme(themeId, definition), 
         this.loadedThemes.add(themeId), this.emitLoad(themeId);
     }
     /**
-     * Load CSS theme
-     */    async loadCSSTheme(themeId, definition, options) {
+   * Load CSS theme
+   */    async loadCSSTheme(themeId, definition, options) {
         // Check cache
         if (this.config.enableCache) {
             const cached = this.cache.getCSS(themeId);
@@ -19369,8 +20025,8 @@ function generateCSSVariables(theme, options = {}) {
         }
     }
     /**
-     * Load JS theme
-     */    async loadJSTheme(themeId, definition) {
+   * Load JS theme
+   */    async loadJSTheme(themeId, definition) {
         if ("js" !== definition.type) return;
         // Check cache
                 if (this.config.enableCache) {
@@ -19394,8 +20050,8 @@ function generateCSSVariables(theme, options = {}) {
         this.config.enableCache && this.cache.setJS(themeId, theme), this.registry.setTheme(themeId, theme);
     }
     /**
-     * Apply theme (set as active)
-     */    async applyTheme(themeId, removePrevious) {
+   * Apply theme (set as active)
+   */    async applyTheme(themeId, removePrevious) {
         const previousTheme = this.currentTheme;
         // Remove previous theme if requested
                 removePrevious && previousTheme && previousTheme !== themeId && await this.removeTheme(previousTheme);
@@ -19414,15 +20070,15 @@ function generateCSSVariables(theme, options = {}) {
         });
     }
     /**
-     * Apply CSS theme
-     */    async applyCSSTheme(themeId) {
+   * Apply CSS theme
+   */    async applyCSSTheme(themeId) {
         if (isServer()) return;
         const definition = this.registry.getDefinition(themeId), className = definition?.class || themeId;
         applyThemeAttributes(this.config.dataAttribute, className), this.activeTheme = null;
     }
     /**
-     * Apply JS theme
-     */    async applyJSTheme(theme, removePrevious) {
+   * Apply JS theme
+   */    async applyJSTheme(theme, removePrevious) {
         if (isServer()) return;
         // Remove previous JS theme CSS
                 removePrevious && removeInjectedCSS(this.config.styleId), injectCSS(generateCSSVariables(theme, {
@@ -19436,8 +20092,8 @@ function generateCSSVariables(theme, options = {}) {
         this.currentTheme = themeId;
     }
     /**
-     * Remove theme
-     */    async removeTheme(themeId) {
+   * Remove theme
+   */    async removeTheme(themeId) {
         const definition = this.registry.getDefinition(themeId);
         definition && ("css" === definition.type ? isBrowser() && (themeNameOrLinkId => {
             if (isServer()) return;
@@ -19451,35 +20107,35 @@ function generateCSSVariables(theme, options = {}) {
         })(getThemeLinkId(themeId)) : isBrowser() && removeInjectedCSS(this.config.styleId));
     }
     /**
-     * Preload theme
-     */    async preloadTheme(themeId) {
+   * Preload theme
+   */    async preloadTheme(themeId) {
         await this.setTheme(themeId, {
             preload: !0
         });
     }
     /**
-     * Get registry
-     */    getRegistry() {
+   * Get registry
+   */    getRegistry() {
         return this.registry;
     }
     /**
-     * Get cache
-     */    getCache() {
+   * Get cache
+   */    getCache() {
         return this.cache;
     }
     /**
-     * Clear failed theme tracking (allows retry of previously failed themes)
-     */    clearFailedThemes() {
+   * Clear failed theme tracking (allows retry of previously failed themes)
+   */    clearFailedThemes() {
         this.failedThemes.clear();
     }
     /**
-     * Clear specific failed theme (allows retry of a specific theme)
-     */    clearFailedTheme(themeId) {
+   * Clear specific failed theme (allows retry of a specific theme)
+   */    clearFailedTheme(themeId) {
         this.failedThemes.delete(themeId);
     }
     /**
-     * Check if theme has failed to load
-     */    hasFailedTheme(themeId) {
+   * Check if theme has failed to load
+   */    hasFailedTheme(themeId) {
         return this.failedThemes.has(themeId);
     }
     on(event, listener) {
@@ -19489,8 +20145,8 @@ function generateCSSVariables(theme, options = {}) {
         "change" === event ? this.changeListeners = this.changeListeners.filter((l => l !== listener)) : "load" === event ? this.loadListeners = this.loadListeners.filter((l => l !== listener)) : "error" === event ? this.errorListeners = this.errorListeners.filter((l => l !== listener)) : "revert" === event && (this.revertListeners = this.revertListeners.filter((l => l !== listener)));
     }
     /**
-     * Emit change event
-     */    emitChange(event) {
+   * Emit change event
+   */    emitChange(event) {
         for (const listener of this.changeListeners) try {
             listener(event);
         } catch (error) {
@@ -19500,8 +20156,8 @@ function generateCSSVariables(theme, options = {}) {
         }
     }
     /**
-     * Emit load event
-     */    emitLoad(themeId) {
+   * Emit load event
+   */    emitLoad(themeId) {
         for (const listener of this.loadListeners) try {
             listener(themeId);
         } catch (error) {
@@ -19511,9 +20167,9 @@ function generateCSSVariables(theme, options = {}) {
         }
     }
     /**
-     * Emit error event
-     * Emits error to listeners (error emission is controlled at call site)
-     */    emitError(error, themeId) {
+   * Emit error event
+   * Emits error to listeners (error emission is controlled at call site)
+   */    emitError(error, themeId) {
         for (const listener of this.errorListeners) try {
             listener(error, themeId);
         } catch (err) {
@@ -19524,8 +20180,8 @@ function generateCSSVariables(theme, options = {}) {
         }
     }
     /**
-     * Emit revert event
-     */    emitRevert(event) {
+   * Emit revert event
+   */    emitRevert(event) {
         for (const listener of this.revertListeners) try {
             listener(event);
         } catch (error) {
@@ -19549,15 +20205,24 @@ function generateCSSVariables(theme, options = {}) {
  */
 /**
  * RTL-aware locales (languages that use RTL)
- */ const RTL_LOCALES = new Set([ "ar", // Arabic
-"he", // Hebrew
-"fa", // Persian/Farsi
-"ur", // Urdu
-"yi", // Yiddish
-"ji", // Yiddish (alternative)
-"iw", // Hebrew (old code)
-"ku", // Kurdish
-"ps", // Pashto
+ */ const RTL_LOCALES = new Set([ "ar", 
+// Arabic
+"he", 
+// Hebrew
+"fa", 
+// Persian/Farsi
+"ur", 
+// Urdu
+"yi", 
+// Yiddish
+"ji", 
+// Yiddish (alternative)
+"iw", 
+// Hebrew (old code)
+"ku", 
+// Kurdish
+"ps", 
+// Pashto
 "sd" ]), DEFAULT_RTL_CONFIG = {
     enabled: !1,
     direction: "ltr",
@@ -19589,66 +20254,66 @@ class RTLManager {
         this.config.enabled && "undefined" != typeof document && this.applyDirection(this.config.direction);
     }
     /**
-     * Detect locale from browser
-     */    detectLocale() {
+   * Detect locale from browser
+   */    detectLocale() {
         if ("undefined" == typeof navigator) return "en";
         // Try navigator.language first
-                const lang = navigator.language || navigator.languages && navigator.languages[0] || "en";
-        return String(lang).split("-")[0].toLowerCase();
+                const lang = navigator.language || navigator.languages && navigator.languages[0] || "en", langParts = String(lang).split("-");
+        return langParts[0] ? langParts[0].toLowerCase() : "en";
     }
     /**
-     * Check if locale is RTL
-     */    isRTLLocale(locale) {
+   * Check if locale is RTL
+   */    isRTLLocale(locale) {
         return RTL_LOCALES.has(locale.toLowerCase());
     }
     /**
-     * Get current direction
-     */    getDirection() {
+   * Get current direction
+   */    getDirection() {
         return this.config.direction;
     }
     /**
-     * Check if RTL is enabled
-     */    isEnabled() {
+   * Check if RTL is enabled
+   */    isEnabled() {
         return this.config.enabled;
     }
     /**
-     * Set direction
-     */    setDirection(direction) {
+   * Set direction
+   */    setDirection(direction) {
         this.config.direction !== direction && (this.config.direction = direction, this.applyDirection(direction), 
         this.notifyListeners(direction));
     }
     /**
-     * Toggle direction
-     */    toggleDirection() {
+   * Toggle direction
+   */    toggleDirection() {
         const newDirection = "ltr" === this.config.direction ? "rtl" : "ltr";
         return this.setDirection(newDirection), newDirection;
     }
     /**
-     * Enable RTL
-     */    enable() {
+   * Enable RTL
+   */    enable() {
         this.config.enabled || (this.config.enabled = !0, this.applyDirection(this.config.direction));
     }
     /**
-     * Disable RTL
-     */    disable() {
+   * Disable RTL
+   */    disable() {
         this.config.enabled && (this.config.enabled = !1, this.applyDirection("ltr"));
     }
     /**
-     * Set locale and auto-adjust direction
-     */    setLocale(locale) {
+   * Set locale and auto-adjust direction
+   */    setLocale(locale) {
         if (this.config.locale = locale.toLowerCase(), this.config.autoDetect) {
             const isRTL = this.isRTLLocale(locale);
             this.setDirection(isRTL ? "rtl" : "ltr");
         }
     }
     /**
-     * Get current locale
-     */    getLocale() {
+   * Get current locale
+   */    getLocale() {
         return this.config.locale;
     }
     /**
-     * Apply direction to DOM
-     */    applyDirection(direction) {
+   * Apply direction to DOM
+   */    applyDirection(direction) {
         if ("undefined" == typeof document) return;
         const html = document.documentElement, body = document.body;
         // Set dir attribute
@@ -19660,16 +20325,16 @@ class RTLManager {
         html.style.setProperty("--atomix-direction", direction), html.style.setProperty("--atomix-text-direction", direction);
     }
     /**
-     * Add direction change listener
-     */    onDirectionChange(callback) {
+   * Add direction change listener
+   */    onDirectionChange(callback) {
         // Return unsubscribe function
         return this.listeners.add(callback), () => {
             this.listeners.delete(callback);
         };
     }
     /**
-     * Notify listeners of direction change
-     */    notifyListeners(direction) {
+   * Notify listeners of direction change
+   */    notifyListeners(direction) {
         this.listeners.forEach((callback => {
             try {
                 callback(direction);
@@ -19681,17 +20346,17 @@ class RTLManager {
         }));
     }
     /**
-     * Get RTL-aware value
-     *
-     * Returns different values based on direction
-     */    getValue(ltrValue, rtlValue) {
+   * Get RTL-aware value
+   *
+   * Returns different values based on direction
+   */    getValue(ltrValue, rtlValue) {
         return "rtl" === this.config.direction ? rtlValue : ltrValue;
     }
     /**
-     * Get RTL-aware CSS property
-     *
-     * Returns appropriate CSS property based on direction
-     */    getCSSProperty(property) {
+   * Get RTL-aware CSS property
+   *
+   * Returns appropriate CSS property based on direction
+   */    getCSSProperty(property) {
         return "rtl" === this.config.direction && {
             left: "right",
             right: "left",
@@ -19708,8 +20373,8 @@ class RTLManager {
         }[property] || property;
     }
     /**
-     * Destroy RTL manager
-     */    destroy() {
+   * Destroy RTL manager
+   */    destroy() {
         if (this.listeners.clear(), "undefined" != typeof document) {
             const html = document.documentElement, body = document.body;
             html.removeAttribute("dir"), html.removeAttribute(this.config.dataAttribute), body?.removeAttribute("dir"), 
@@ -19718,14 +20383,6 @@ class RTLManager {
     }
 }
 
-/**
- * Theme Manager
- *
- * Core theme management class for the Atomix Design System.
- * Rewritten to use the new ThemeEngine architecture.
- * Handles theme loading, switching, persistence, and events.
- * Supports both CSS-based themes and JavaScript-based themes.
- */
 /**
  * Default configuration values
  */ const DEFAULT_CONFIG = {
@@ -19755,10 +20412,10 @@ class RTLManager {
  * ```
  */ class ThemeManager {
     /**
-     * Create a new ThemeManager instance
-     *
-     * @param config - Theme manager configuration
-     */
+   * Create a new ThemeManager instance
+   *
+   * @param config - Theme manager configuration
+   */
     constructor(config) {
         this.currentTheme = null, this.activeTheme = null, this.eventListeners = {
             themeChange: [],
@@ -19830,8 +20487,8 @@ class RTLManager {
         this.initialize();
     }
     /**
-     * Initialize the theme manager
-     */    initialize() {
+   * Initialize the theme manager
+   */    initialize() {
         this.initialized || isServer() || (
         // Initialize engine
         this.engine.initialize().then((() => {
@@ -19869,8 +20526,9 @@ class RTLManager {
                     removePrevious: !1,
                     fallbackOnError: !0
                 }).catch((error => {
+                    var _context;
                     // Only log error once, don't spam console
-                    error instanceof Error && !error.message.includes("previously failed") && this.logger.warn(`Failed to load default theme "${themeId}"`, {
+                                        error instanceof Error && !_includesInstanceProperty(_context = error.message).call(_context, "previously failed") && this.logger.warn(`Failed to load default theme "${themeId}"`, {
                         themeId: themeId,
                         error: error.message
                     });
@@ -19884,8 +20542,8 @@ class RTLManager {
                 })), this.initialized = !0);
     }
     /**
-     * Get default theme
-     */    getDefaultTheme() {
+   * Get default theme
+   */    getDefaultTheme() {
         // Check storage first
         if (this.config.enablePersistence && this.storageAdapter.isAvailable()) {
             const stored = this.storageAdapter.getItem(this.config.storageKey);
@@ -19900,8 +20558,8 @@ class RTLManager {
                 return this.config.defaultTheme || null;
     }
     /**
-     * Set theme
-     */    async setTheme(theme, options) {
+   * Set theme
+   */    async setTheme(theme, options) {
         // Persist to storage
         if (await this.engine.setTheme(theme, options), this.config.enablePersistence && this.storageAdapter.isAvailable()) {
             const themeId = "string" == typeof theme ? theme : theme.name || "js-theme";
@@ -19911,39 +20569,39 @@ class RTLManager {
                 this.config.onThemeChange && this.config.onThemeChange(theme);
     }
     /**
-     * Get current theme
-     */    getTheme() {
+   * Get current theme
+   */    getTheme() {
         return this.currentTheme || ("string" == typeof this.config.defaultTheme ? this.config.defaultTheme : "");
     }
     /**
-     * Get active theme object (for JS themes)
-     */    getActiveTheme() {
+   * Get active theme object (for JS themes)
+   */    getActiveTheme() {
         return this.activeTheme || this.engine.getActiveTheme();
     }
     /**
-     * Get available themes
-     */    getAvailableThemes() {
+   * Get available themes
+   */    getAvailableThemes() {
         return this.engine.getRegistry().getAllMetadata();
     }
     /**
-     * Check if theme is loaded
-     */    isThemeLoaded(themeName) {
+   * Check if theme is loaded
+   */    isThemeLoaded(themeName) {
         return this.engine.isThemeLoaded(themeName);
     }
     /**
-     * Preload theme
-     */    async preloadTheme(themeName) {
+   * Preload theme
+   */    async preloadTheme(themeName) {
         await this.engine.preloadTheme(themeName);
     }
-    on(event, callback) {
+    /* eslint-enable no-dupe-class-members */    on(event, callback) {
         "themeChange" === event ? this.eventListeners.themeChange.push(callback) : "themeLoad" === event ? this.eventListeners.themeLoad.push(callback) : "themeError" === event && this.eventListeners.themeError.push(callback);
     }
-    off(event, callback) {
+    /* eslint-enable no-dupe-class-members */    off(event, callback) {
         "themeChange" === event ? this.eventListeners.themeChange = this.eventListeners.themeChange.filter((cb => cb !== callback)) : "themeLoad" === event ? this.eventListeners.themeLoad = this.eventListeners.themeLoad.filter((cb => cb !== callback)) : "themeError" === event && (this.eventListeners.themeError = this.eventListeners.themeError.filter((cb => cb !== callback)));
     }
     /**
-     * Emit theme change event
-     */    emitThemeChange(event) {
+   * Emit theme change event
+   */    emitThemeChange(event) {
         for (const callback of this.eventListeners.themeChange) try {
             callback(event);
         } catch (error) {
@@ -19953,8 +20611,8 @@ class RTLManager {
         }
     }
     /**
-     * Emit theme load event
-     */    emitThemeLoad(themeName) {
+   * Emit theme load event
+   */    emitThemeLoad(themeName) {
         for (const callback of this.eventListeners.themeLoad) try {
             callback(themeName);
         } catch (error) {
@@ -19964,8 +20622,8 @@ class RTLManager {
         }
     }
     /**
-     * Emit theme error event
-     */    emitThemeError(error, themeName) {
+   * Emit theme error event
+   */    emitThemeError(error, themeName) {
         if (error instanceof ThemeError || new ThemeError(error.message, ThemeErrorCode.THEME_LOAD_FAILED, {
             themeName: themeName,
             originalError: error.message
@@ -19985,28 +20643,28 @@ class RTLManager {
         }
     }
     /**
-     * Get engine instance (for advanced usage)
-     */    getEngine() {
+   * Get engine instance (for advanced usage)
+   */    getEngine() {
         return this.engine;
     }
     /**
-     * Get RTL manager
-     */    getRTLManager() {
+   * Get RTL manager
+   */    getRTLManager() {
         return this.rtlManager;
     }
     /**
-     * Set RTL direction
-     */    setDirection(direction) {
+   * Set RTL direction
+   */    setDirection(direction) {
         this.rtlManager?.setDirection(direction);
     }
     /**
-     * Get current direction
-     */    getDirection() {
+   * Get current direction
+   */    getDirection() {
         return this.rtlManager?.getDirection() || "ltr";
     }
     /**
-     * Destroy theme manager
-     */    destroy() {
+   * Destroy theme manager
+   */    destroy() {
         // Remove all listeners
         this.eventListeners = {
             themeChange: [],
@@ -20027,7 +20685,7 @@ class RTLManager {
  */
 /**
  * Theme context with default values
- */ const ThemeContext = createContext(null);
+ */ const ThemeContext =  createContext(null);
 
 ThemeContext.displayName = "ThemeContext";
 
@@ -20403,7 +21061,7 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
         ...target
     };
     for (const source of sources) if (source) for (const key in source) {
-        if (!source.hasOwnProperty(key)) continue;
+        if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
         const targetValue = result[key], sourceValue = source[key];
         isObject(targetValue) && isObject(sourceValue) ? 
         // Recursively merge objects
@@ -20500,25 +21158,6 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
             custom: theme.custom
         };
     }
-    /**
- * createTheme - Create a theme object with computed values
- *
- * Similar to Material-UI's createTheme, this function accepts theme configuration
- * options and returns a complete theme object with computed values.
- *
- * @example
- * ```typescript
- * const theme = createTheme({
- *   palette: {
- *     primary: { main: '#7AFFD7' },
- *     secondary: { main: '#FF5733' },
- *   },
- *   typography: {
- *     fontFamily: 'Inter, sans-serif',
- *   },
- * });
- * ```
- */
     // ============================================================================
     // Default Theme Values
     // ============================================================================
@@ -20745,7 +21384,7 @@ function createPaletteColor(color) {
  */
 function createTheme(...options) {
     // Merge all options
-    const mergedOptions = options.reduce(((acc, option) => deepMerge(acc, option)), {}), palette = {
+    const mergedOptions = _reduceInstanceProperty(options).call(options, ((acc, option) => deepMerge(acc, option)), {}), palette = {
         primary: createPaletteColor(mergedOptions.palette?.primary || DEFAULT_PALETTE.primary),
         secondary: createPaletteColor(mergedOptions.palette?.secondary || DEFAULT_PALETTE.secondary),
         error: createPaletteColor(mergedOptions.palette?.error || DEFAULT_PALETTE.error),
@@ -20921,11 +21560,6 @@ function createThemeFromConfig(config) {
         return config.prefix && config.prefix, theme;
 }
 
-/**
- * Theme Tools for Library Users
- *
- * Developer-friendly utilities for working with Atomix themes
- */
 /**
  * Quick theme creator with sensible defaults
  */ function quickTheme(name, primaryColor, secondaryColor) {
@@ -20951,7 +21585,7 @@ function createThemeFromConfig(config) {
             mode: "dark",
             background: {
                 default: "#121212",
-                paper: "#1e1e1e"
+                subtle: "#1e1e1e"
             },
             text: {
                 primary: "#ffffff",
@@ -21000,7 +21634,8 @@ function createThemeFromConfig(config) {
 /**
  * Check if theme supports dark mode
  */ function supportsDarkMode(theme) {
-    return "dark" === theme.palette?.mode || !0 === theme.supportsDarkMode || Boolean(theme.a11y?.modes?.includes("dark"));
+    var _context;
+    return "dark" === theme.palette?.mode || !0 === theme.supportsDarkMode || Boolean((null == (_context = theme.a11y?.modes) ? void 0 : Function.call.bind(_includesInstanceProperty(_context), _context))?.("dark"));
 }
 
 /**
@@ -21033,8 +21668,8 @@ function createThemeFromConfig(config) {
         this.commands = new Map, this.registerDefaultCommands();
     }
     /**
-     * Register default commands
-     */    registerDefaultCommands() {
+   * Register default commands
+   */    registerDefaultCommands() {
         this.register({
             name: "validate",
             description: "Validate theme configuration",
@@ -21078,13 +21713,13 @@ function createThemeFromConfig(config) {
         });
     }
     /**
-     * Register a command
-     */    register(command) {
+   * Register a command
+   */    register(command) {
         this.commands.set(command.name, command);
     }
     /**
-     * Run CLI with arguments
-     */    async run(args) {
+   * Run CLI with arguments
+   */    async run(args) {
         const [commandName, ...commandArgs] = args;
         if (!commandName) return void this.handleHelp([], {});
         const command = this.commands.get(commandName);
@@ -21098,8 +21733,8 @@ function createThemeFromConfig(config) {
         }
     }
     /**
-     * Parse command arguments
-     */    parseArgs(args) {
+   * Parse command arguments
+   */    parseArgs(args) {
         const parsedArgs = [], options = {};
         for (let i = 0; i < args.length; i++) {
             const arg = args[i];
@@ -21114,8 +21749,8 @@ function createThemeFromConfig(config) {
         };
     }
     /**
-     * Handle validate command
-     */    handleValidate(args, options) {
+   * Handle validate command
+   */    handleValidate(args, options) {
         try {
             const result = validateConfig(loadThemeConfig());
             result.valid ? result.warnings.length > 0 && result.warnings.forEach((warning => {})) : (result.errors.forEach((error => {})), 
@@ -21125,8 +21760,8 @@ function createThemeFromConfig(config) {
         }
     }
     /**
-     * Handle list command
-     */    handleList(args, options) {
+   * Handle list command
+   */    handleList(args, options) {
         try {
             const themes = loadThemeConfig().themes || {};
             if (0 === Object.keys(themes).length) return;
@@ -21137,8 +21772,8 @@ function createThemeFromConfig(config) {
         }
     }
     /**
-     * Handle inspect command
-     */    handleInspect(args, options) {
+   * Handle inspect command
+   */    handleInspect(args, options) {
         const themeName = options.theme || args[0];
         themeName || (console.error("Error: Theme name is required"), console.error("Usage: atomix-theme inspect --theme <theme-name>"), 
         process.exit(1));
@@ -21151,8 +21786,8 @@ function createThemeFromConfig(config) {
         }
     }
     /**
-     * Handle compare command
-     */    handleCompare(args, options) {
+   * Handle compare command
+   */    handleCompare(args, options) {
         const theme1 = options.theme1 || args[0], theme2 = options.theme2 || args[1];
         theme1 && theme2 || (console.error("Error: Two theme names are required"), console.error("Usage: atomix-theme compare --theme1 <name1> --theme2 <name2>"), 
         process.exit(1));
@@ -21171,8 +21806,8 @@ function createThemeFromConfig(config) {
         }
     }
     /**
-     * Handle export command
-     */    handleExport(args, options) {
+   * Handle export command
+   */    handleExport(args, options) {
         const themeName = options.theme || args[0], outputPath = options.output || `${themeName}.json`;
         themeName || (console.error("Error: Theme name is required"), console.error("Usage: atomix-theme export --theme <theme-name> [--output <path>]"), 
         process.exit(1));
@@ -21185,8 +21820,8 @@ function createThemeFromConfig(config) {
         }
     }
     /**
-     * Handle help command
-     */    handleHelp(args, options) {
+   * Handle help command
+   */    handleHelp(args, options) {
         for (const [name, command] of this.commands.entries()) if (command.options) for (const [option, description] of Object.entries(command.options)) ;
     }
 }
@@ -21956,9 +22591,12 @@ function createThemeFromConfig(config) {
             ...theme
         }, keys = path.split(".");
         let current = newTheme;
-        for (let i = 0; i < keys.length - 1; i++) current[keys[i]] || (current[keys[i]] = {}), 
-        current = current[keys[i]];
-        current[keys[keys.length - 1]] = value, updateTheme(createTheme(newTheme));
+        for (let i = 0; i < keys.length - 1; i++) {
+            const key = keys[i];
+            key && !current[key] && (current[key] = {}), key && (current = current[key]);
+        }
+        const lastKey = keys[keys.length - 1];
+        lastKey && (current[lastKey] = value), updateTheme(createTheme(newTheme));
     }), [ theme, updateTheme ]), exportTheme = useCallback((() => {
         const dataStr = JSON.stringify(theme, null, 2), dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr), exportFileDefaultName = `${theme.name.toLowerCase().replace(/\s+/g, "-")}-theme.json`, linkElement = document.createElement("a");
         linkElement.setAttribute("href", dataUri), linkElement.setAttribute("download", exportFileDefaultName), 
@@ -22124,8 +22762,8 @@ class ThemeApplicator {
         this.appliedVars = new Set, this.root = root;
     }
     /**
-     * Apply a complete theme configuration
-     */    applyTheme(theme) {
+   * Apply a complete theme configuration
+   */    applyTheme(theme) {
         // Clear previously applied variables
         this.clearAppliedVars(), 
         // Apply global CSS variables
@@ -22140,55 +22778,56 @@ class ThemeApplicator {
         theme.components && this.applyComponentOverrides(theme.components);
     }
     /**
-     * Apply global CSS variables
-     */    applyGlobalCSSVars(vars) {
+   * Apply global CSS variables
+   */    applyGlobalCSSVars(vars) {
         Object.entries(vars).forEach((([key, value]) => {
             this.root.style.setProperty(key, String(value)), this.appliedVars.add(key);
         }));
     }
     /**
-     * Apply typography system
-     */    applyTypography(typography) {
+   * Apply typography system
+   */    applyTypography(typography) {
         if (!typography) return;
         const vars = {};
         typography.fontFamily && (vars["--atomix-font-family"] = typography.fontFamily), 
         typography.fontSize && Object.entries(typography.fontSize).forEach((([key, value]) => {
-            vars[`--atomix-font-size-${key}`] = value;
+            "string" != typeof value && "number" != typeof value || (vars[`--atomix-font-size-${key}`] = value);
         })), typography.fontWeight && Object.entries(typography.fontWeight).forEach((([key, value]) => {
-            vars[`--atomix-font-weight-${key}`] = value;
+            "string" != typeof value && "number" != typeof value || (vars[`--atomix-font-weight-${key}`] = value);
         })), typography.lineHeight && Object.entries(typography.lineHeight).forEach((([key, value]) => {
-            vars[`--atomix-line-height-${key}`] = value;
+            "string" != typeof value && "number" != typeof value || (vars[`--atomix-line-height-${key}`] = value);
         })), this.applyGlobalCSSVars(vars);
     }
     /**
-     * Apply spacing system
-     */    applySpacing(spacing) {
+   * Apply spacing system
+   */    applySpacing(spacing) {
         const vars = {};
-        Object.entries(spacing).forEach((([key, value]) => {
-            vars[`--atomix-space-${key}`] = value;
-        })), this.applyGlobalCSSVars(vars);
+        // Handle spacing function or object
+                "function" != typeof spacing && ("object" == typeof spacing && null !== spacing && Object.entries(spacing).forEach((([key, value]) => {
+            "string" != typeof value && "number" != typeof value || (vars[`--atomix-space-${key}`] = value);
+        })), this.applyGlobalCSSVars(vars));
     }
     /**
-     * Apply color palette
-     */    applyPalette(palette) {
+   * Apply color palette
+   */    applyPalette(palette) {
         if (!palette) return;
         const vars = {};
         Object.entries(palette).forEach((([colorName, colorScale]) => {
-            colorScale && Object.entries(colorScale).forEach((([shade, value]) => {
-                value && (vars[`--atomix-color-${colorName}-${shade}`] = value);
+            colorScale && "object" == typeof colorScale && Object.entries(colorScale).forEach((([shade, value]) => {
+                !value || "string" != typeof value && "number" != typeof value || (vars[`--atomix-color-${colorName}-${shade}`] = value);
             }));
         })), this.applyGlobalCSSVars(vars);
     }
     /**
-     * Apply component-level overrides
-     */    applyComponentOverrides(overrides) {
+   * Apply component-level overrides
+   */    applyComponentOverrides(overrides) {
         Object.entries(overrides).forEach((([componentName, override]) => {
             override && this.applyComponentOverride(componentName, override);
         }));
     }
     /**
-     * Apply override for a specific component
-     */    applyComponentOverride(componentName, override) {
+   * Apply override for a specific component
+   */    applyComponentOverride(componentName, override) {
         const vars = {}, componentKey = componentName.toLowerCase();
         // Apply component-level CSS variables
         override.cssVars && Object.entries(override.cssVars).forEach((([key, value]) => {
@@ -22212,23 +22851,23 @@ class ThemeApplicator {
         })), this.applyGlobalCSSVars(vars);
     }
     /**
-     * Clear all applied CSS variables
-     */    clearAppliedVars() {
+   * Clear all applied CSS variables
+   */    clearAppliedVars() {
         removeCSSVariables(Array.from(this.appliedVars), this.root), this.appliedVars.clear();
     }
     /**
-     * Get all currently applied variables
-     */    getAppliedVars() {
+   * Get all currently applied variables
+   */    getAppliedVars() {
         return Array.from(this.appliedVars);
     }
     /**
-     * Remove theme application
-     */    removeTheme() {
+   * Remove theme application
+   */    removeTheme() {
         this.clearAppliedVars();
     }
     /**
-     * Update specific CSS variables without clearing all
-     */    updateCSSVars(vars) {
+   * Update specific CSS variables without clearing all
+   */    updateCSSVars(vars) {
         this.applyGlobalCSSVars(vars);
     }
 }
@@ -22610,7 +23249,7 @@ function getComponentCSSVars(component) {
     // No slot provided, use fallback
     if (!slot) return fallback;
     // Slot is a plain React node
-        if (React.isValidElement(slot) || "string" == typeof slot || "number" == typeof slot) return slot;
+        if ( React.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;
@@ -22641,7 +23280,7 @@ function getComponentCSSVars(component) {
  * Later slots override earlier ones
  */ function mergeSlots(...slots) {
     const filtered = slots.filter((s => void 0 !== s));
-    if (0 !== filtered.length) return 1 === filtered.length ? filtered[0] : filtered.reduce(((acc, slot) => ({
+    if (0 !== filtered.length) return 1 === filtered.length ? filtered[0] : _reduceInstanceProperty(filtered).call(filtered, ((acc, slot) => ({
         ...acc,
         ...slot
     })));
@@ -22683,12 +23322,6 @@ function getComponentCSSVars(component) {
     return React.useMemo((() => renderSlot(slot, props, fallback)), [ slot, props, fallback ]);
 }
 
-/**
- * Component Customization Hook
- *
- * Merges theme-level component overrides with component-level props
- * for comprehensive customization support.
- */
 /**
  * Hook to merge theme overrides with component props
  *
@@ -22713,8 +23346,11 @@ function getComponentCSSVars(component) {
         })), merged;
     }), [ theme, component, props.parts ]), className = useMemo((() => [ theme?.components?.[component]?.className || "", props.className || "" ].filter(Boolean).join(" ")), [ theme, component, props.className ]), style = useMemo((() => ({
         ...props.style
-    })), [ props.style ]), cssVarStyle = useMemo((() => Object.entries(cssVars).reduce(((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
-    acc)), {})), [ cssVars ]);
+    })), [ props.style ]), cssVarStyle = useMemo((() => {
+        var _context;
+        return _reduceInstanceProperty(_context = Object.entries(cssVars)).call(_context, ((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
+        acc)), {});
+    }), [ cssVars ]);
     // Merge CSS variables
         return {
         cssVars: cssVars,
@@ -22744,8 +23380,9 @@ function getComponentCSSVars(component) {
 /**
  * Utility to apply CSS variables to style object
  */ function applyCSSVarsToStyle(cssVars, baseStyle) {
+    var _context2;
     return {
-        ...Object.entries(cssVars).reduce(((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
+        ..._reduceInstanceProperty(_context2 = Object.entries(cssVars)).call(_context2, ((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
         acc)), {}),
         ...baseStyle
     };
@@ -22804,10 +23441,46 @@ function getComponentCSSVars(component) {
  * Resolve config path
  *
  * Finds atomix.config.ts in the project, checking common locations.
+ * Returns null in browser environments where file system access is not available.
+ *
+ * This function is designed to work in Node.js environments only.
+ * In browser builds, it will always return null without attempting to access Node.js modules.
+ *
+ * @internal This function uses Node.js modules and should not be called in browser environments.
  */ function resolveConfigPath() {
-    if ("undefined" == typeof process || !process.cwd) return null;
-    const fs = require("fs"), path = require("path"), cwd = process.cwd(), possiblePaths = [ path.join(cwd, "atomix.config.ts"), path.join(cwd, "atomix.config.js"), path.join(cwd, "atomix.config.mjs") ];
-    for (const configPath of possiblePaths) if (fs.existsSync(configPath)) return configPath;
+    // Early return for browser environments - prevents any Node.js module access
+    // This check happens before any require() calls, preventing bundlers from analyzing them
+    if ("undefined" != typeof window || "undefined" == typeof process || !process.cwd) return null;
+    // Only attempt to load Node.js modules in Node.js runtime
+    // Use a lazy-loading pattern that prevents static analysis by bundlers
+        try {
+        // Create a function that only executes in Node.js runtime
+        // Use string-based module names to prevent static analysis by bundlers
+        const modules = (() => {
+            // These requires are only executed at runtime in Node.js environments
+            // They are marked as external in Rollup config and should not be bundled
+            // Using string concatenation and computed property access to prevent static analysis
+            if ("undefined" == typeof require) return null;
+            // Use a try-catch wrapper to safely access require
+                        try {
+                // Build module names dynamically to prevent static analysis
+                const moduleNames = [ "fs", "path" ];
+                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+                                return {
+                    fs: require(moduleNames[0]),
+                    path: require(moduleNames[1])
+                };
+            } catch {
+                return null;
+            }
+        })();
+        if (!modules) return null;
+        const {fs: fs, path: path} = modules, cwd = process.cwd(), possiblePaths = [ path.join(cwd, "atomix.config.ts"), path.join(cwd, "atomix.config.js"), path.join(cwd, "atomix.config.mjs") ];
+        for (const configPath of possiblePaths) if (fs.existsSync(configPath)) return configPath;
+    } catch (error) {
+        // Silently fail in browser environments or when modules are unavailable
+        return null;
+    }
     return null;
 }
 
@@ -22879,5 +23552,5 @@ const composables = composablesImport, utils = utilsImport, types = typesImport,
     types: types
 };
 
-export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GLASS_CONTAINER, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeCLI, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemeManager, ThemePreview, ThemeProvider, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyTheme, composables, constants, createCLI, createCSSVarStyle, createDarkVariant, createDebugAttrs, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeFromConfig, cssVarsToStyle, atomix as default, defineConfig, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateComponentCSSVars, generateUUID, getCSSVariable, getComponentCSSVars, getPartStyles, getThemeApplicator, getThemeMetadata, hasCustomization, importTheme, isSlot, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, mapSCSSTokensToCSSVars, mergeCSSVars, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, quickTheme, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, runCLI, sliderConstants, supportsDarkMode, theme, themeToCSS, types, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useTodo, utils, validateTheme };
+export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GLASS_CONTAINER, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeCLI, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemeManager, ThemePreview, ThemeProvider, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyPartStyles, applyTheme, composables, constants, createCLI, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeFromConfig, cssVarsToStyle, atomix as default, defineConfig, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getCSSVariable, getComponentCSSVars, getPartStyles, getThemeApplicator, getThemeMetadata, hasCustomization, importTheme, isSlot, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, preloadFonts, quickTheme, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, runCLI, sliderConstants, supportsDarkMode, theme, themeToCSS, types, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useTodo, utils, validateTheme };
 //# sourceMappingURL=index.esm.js.map