@shohojdhara/atomix 0.3.4 → 0.3.5

package/dist/index.js

@@ -1565,14 +1565,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 React.useEffect((() => {
         updatePanelHeight();
     }), [ isOpen ]), 
     /**
-     * Effect to handle window resize and update panel height
-     */
+   * Effect to handle window resize and update panel height
+   */
     React.useEffect((() => {
         const handleResize = () => {
             isOpen && updatePanelHeight();
@@ -1661,7 +1661,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
         const childArray = React__default.default.Children.toArray(children);
         for (let i = 0; i < childArray.length; i++) {
             const child = childArray[i];
-            if (React__default.default.isValidElement(child)) {
+            if ( React__default.default.isValidElement(child)) {
                 const radius = extractBorderRadiusFromElement(child);
                 if (null !== radius) return radius;
             }
@@ -1829,7 +1829,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter = React.memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer = React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
 }, globalMousePosition: globalMousePosition = {
@@ -2093,8 +2093,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
@@ -2115,10 +2115,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
@@ -2129,15 +2129,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, {
@@ -2145,22 +2145,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) => {
@@ -2504,11 +2504,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 = React.useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = React.useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = React.useMemo((() => {
         const isOverLight = getEffectiveOverLight(), mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
             isOverLight: isOverLight,
@@ -2538,13 +2538,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
     }), [ onClick ]), handleMouseMove = React.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,
@@ -2877,7 +2877,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 =  React.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 = React.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,
@@ -2948,7 +2948,7 @@ const Accordion = ({title: title, children: children, defaultOpen: defaultOpen =
         });
     }
     return accordionContent;
-};
+}));
 
 // Set display name for debugging
 Accordion.displayName = "Accordion";
@@ -3290,7 +3290,7 @@ const sizeMap = {
  * Icon component that displays a Phosphor icon
  */ 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 =  React.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] = React.useState(!1), avatarClasses = [ AVATAR.CLASSES.BASE, "md" !== size && `c-avatar--${size}`, circle && AVATAR.CLASSES.CIRCLE, disabled && "is-disabled", className ].filter(Boolean).join(" ");
     return jsxRuntime.jsx("div", {
         className: avatarClasses,
@@ -3322,18 +3322,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 = React.Children.toArray(children).filter((child => React.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 = React.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 = React.Children.toArray(children).filter((child =>  React.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 =  React.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 jsxRuntime.jsxs("div", {
         className: avatarGroupClasses,
         style: style,
-        children: [ visibleAvatars.map(((child, index) => React.isValidElement(child) ? React.cloneElement(child, {
+        children: [ visibleAvatars.map(((child, index) =>  React.isValidElement(child) ?  React.cloneElement(child, {
             key: index,
             ...child.props
         }) : null)), showMoreIndicator && jsxRuntime.jsx("div", {
@@ -3357,10 +3357,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;
@@ -3371,7 +3371,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 =  React.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,
@@ -3410,7 +3410,7 @@ const Badge = ({label: label, variant: variant = "primary", size: size = "md", d
         });
     }
     return badgeElement;
-};
+}));
 
 Badge.displayName = "Badge";
 
@@ -3433,7 +3433,7 @@ Badge.displayName = "Badge";
  * </Container>
  * ```
  */
-const Container = React.forwardRef((({children: children, className: className = "", type: type, ...props}, ref) => {
+const Container =  React.forwardRef((({children: children, className: className = "", type: type, ...props}, ref) => {
     let containerClass = "o-container";
     return type && (containerClass = `o-container-${type}`), jsxRuntime.jsx("div", {
         ref: ref,
@@ -3464,7 +3464,7 @@ const useBlock = () => ({
         // Add custom className
         className && classes.push(className), classes.filter(Boolean).join(" ");
     }
-}), Block = React.forwardRef((({children: children, as: Component = "section", spacing: spacing = "md", container: container = {}, fullWidth: fullWidth = !1, className: className = "", style: style, background: background = "", ...props}, ref) => {
+}), Block =  React.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,
@@ -3518,7 +3518,7 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb = ({items: items, divider: divider, className: className = "", ariaLabel: ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const Breadcrumb =  React.memo((({items: items, divider: divider, className: className = "", ariaLabel: ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
     return jsxRuntime.jsx("nav", {
         "aria-label": ariaLabel,
@@ -3557,7 +3557,7 @@ const Breadcrumb = ({items: items, divider: divider, className: className = "",
             }))
         })
     });
-};
+}));
 
 /**
  * Button state and functionality
@@ -3579,10 +3579,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 : "";
@@ -3607,10 +3607,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;
@@ -3621,7 +3621,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 =  React.memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass}) => {
     const {generateSpinnerClass: generateSpinnerClass} = useSpinner({
         size: size,
         variant: variant,
@@ -3656,11 +3656,11 @@ const Spinner = ({size: size = "md", variant: variant = "primary", fullscreen: f
         });
     }
     return spinnerContent;
-};
+}));
 
 Spinner.displayName = "Spinner";
 
-const Button = React__default.default.memo(React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, 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 = React.useMemo((() => loading ? null : iconName ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -3826,6 +3826,378 @@ const Button = React__default.default.memo(React.forwardRef((({label: label, chi
 
 Button.displayName = "Button";
 
+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, _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 component for displaying important messages, notifications, or alerts
  */
@@ -3846,10 +4218,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;
@@ -3867,12 +4239,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 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsxs("div", {
@@ -3954,7 +4327,7 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
 
 Callout.displayName = "Callout";
 
-const Card = React__default.default.memo(React.forwardRef((({
+const Card =  React__default.default.memo( React.forwardRef((({
 // Variants
 size: size = "md", variant: variant = "", appearance: appearance = "filled", elevation: elevation = "none", hoverable: hoverable = !1, hoverElevation: hoverElevation = "md", 
 // Layout
@@ -4085,7 +4458,7 @@ className: className = "", style: style, ...rest}, ref) => {
 
 Card.displayName = "Card";
 
-const CardHeader = React.forwardRef((({title: title, subtitle: subtitle, action: action, icon: icon, children: children, className: className = "", ...props}, ref) => {
+const CardHeader =  React.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 jsxRuntime.jsxs("div", {
         ref: ref,
@@ -4111,7 +4484,7 @@ const CardHeader = React.forwardRef((({title: title, subtitle: subtitle, action:
 
 CardHeader.displayName = "CardHeader";
 
-const CardBody = React.forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight, children: children, className: className = "", style: style, ...props}, ref) => {
+const CardBody =  React.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 ? {
@@ -4130,7 +4503,7 @@ const CardBody = React.forwardRef((({scrollable: scrollable = !1, maxHeight: max
 
 CardBody.displayName = "CardBody";
 
-const CardFooter = React.forwardRef((({align: align, children: children, className: className = "", style: style, ...props}, ref) => {
+const CardFooter =  React.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 jsxRuntime.jsx("div", {
         ref: ref,
@@ -4222,6 +4595,60 @@ 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, _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
@@ -4263,8 +4690,8 @@ function useChart(initialProps) {
         animationFrameRef.current && cancelAnimationFrame(animationFrameRef.current);
     }), []);
     /**
-     * Point interaction handlers
-     */
+   * Point interaction handlers
+   */
     const handlePointHover = React.useCallback(((datasetIndex, pointIndex, x, y, clientX, clientY) => {
         setInteractionState((prev => ({
             ...prev,
@@ -4618,9 +5045,7 @@ function useChart(initialProps) {
 
 /**
  * Hook for chart data processing and transformation
- */ ElevationCard.displayName = "ElevationCard";
-
-const ChartToolbar = React.memo(React.forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
+ */ const ChartToolbar =  React.memo( React.forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
     refresh: !0,
     export: !0,
     fullscreen: !0,
@@ -5007,7 +5432,7 @@ const ChartToolbar = React.memo(React.forwardRef((({chartType: chartType = "line
 
 ChartToolbar.displayName = "ChartToolbar";
 
-const ChartContext = React.createContext(null), Chart = React.memo(React.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 =  React.createContext(null), Chart =  React.memo( React.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] = React.useState(!1), [isExporting, setIsExporting] = React.useState(!1), chartContainerRef = React.useRef(null), [zoomLevel, setZoomLevel] = React.useState(1), [panOffset, setPanOffset] = React.useState({
@@ -5626,7 +6051,7 @@ Chart.displayName = "Chart";
 /**
  * Enhanced chart renderer component with comprehensive functionality
  */
-const ChartRenderer = React.memo(React.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 =  React.memo( React.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 = React.useContext(ChartContext), {calculateScales: calculateScales, getChartColors: getChartColors} = useChart(), {processedData: processedData, isProcessing: isProcessing} = function(datasets, options) {
@@ -5642,14 +6067,15 @@ const ChartRenderer = React.memo(React.forwardRef((({datasets: datasets = [], co
         }), [ enableDecimation ]), calculateMovingAverage = React.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 = React.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
@@ -5786,7 +6212,7 @@ const ChartRenderer = React.memo(React.forwardRef((({datasets: datasets = [], co
         // Announce data changes
         React.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
@@ -6065,7 +6491,7 @@ const ChartRenderer = React.memo(React.forwardRef((({datasets: datasets = [], co
 
 ChartRenderer.displayName = "ChartRenderer";
 
-const BaseChart = React.memo(React.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 =  React.memo( React.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 = React.useCallback((params => renderContent(params)), [ renderContent ]);
     return jsxRuntime.jsx(Chart, {
         ref: ref,
@@ -6088,81 +6514,89 @@ const BaseChart = React.memo(React.forwardRef((({type: type, datasets: datasets
 
 BaseChart.displayName = "BaseChart";
 
-const AnimatedChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, chartType: chartType = "line", particleEffects: particleEffects, onDataPointClick: onDataPointClick, ...props}, ref) => {
-    const animationRef = React.useRef(0), timeRef = React.useRef(0), particlesRef = React.useRef([]), renderContent = React.useCallback((({scales: scales, colors: colors, datasets: chartDatasets, handlers: handlers, hoveredPoint: hoveredPoint, toolbarState: toolbarState, config: renderConfig}) => {
-        if (
-        // Animation time tracking
-        React.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 =  React.memo( React.forwardRef((({datasets: datasets = [], config: config = {}, chartType: chartType = "line", particleEffects: particleEffects, onDataPointClick: onDataPointClick, ...props}, ref) => {
+    const animationRef = React.useRef(0), timeRef = React.useRef(0), particlesRef = React.useRef([]);
+    // Animation time tracking - moved outside callback
+    React.useEffect((() => {
+        const animateFrame = timestamp => {
+            timeRef.current = timestamp, animationRef.current = requestAnimationFrame(animateFrame);
+        };
+        return animationRef.current = requestAnimationFrame(animateFrame), () => {
+            animationRef.current && cancelAnimationFrame(animationRef.current);
+        };
+    }), []);
+    const renderContent = React.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(jsxRuntime.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(jsxRuntime.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(jsxRuntime.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(jsxRuntime.jsx("path", {
+                                d: areaPath,
+                                fill: color,
+                                fillOpacity: "0.3",
+                                style: {
+                                    transform: `translateY(${2 * Math.sin(.01 * timeRef.current)}px)`
+                                }
+                            }, `area-${datasetIndex}`));
+                        }
+                        // Line
+                                                elements.push(jsxRuntime.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(jsxRuntime.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(jsxRuntime.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(jsxRuntime.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++) {
@@ -6183,7 +6617,7 @@ const AnimatedChart = React.memo(React.forwardRef((({datasets: datasets = [], co
     }), [ chartType, particleEffects ]);
     return jsxRuntime.jsx(BaseChart, {
         ref: ref,
-        type: "animated",
+        type: "line",
         datasets: datasets,
         config: config,
         renderContent: renderContent,
@@ -6194,7 +6628,7 @@ const AnimatedChart = React.memo(React.forwardRef((({datasets: datasets = [], co
 
 AnimatedChart.displayName = "AnimatedChart";
 
-const ChartTooltip = React.memo((({dataPoint: dataPoint, datasetLabel: datasetLabel, datasetColor: datasetColor, position: position, visible: visible, customRenderer: customRenderer}) => {
+const ChartTooltip =  React.memo((({dataPoint: dataPoint, datasetLabel: datasetLabel, datasetColor: datasetColor, position: position, visible: visible, customRenderer: customRenderer}) => {
     const tooltipRef = React.useRef(null), [adjustedPosition, setAdjustedPosition] = React.useState(position);
     // Dynamic positioning to keep tooltip in viewport
     return React.useEffect((() => {
@@ -6211,7 +6645,7 @@ const ChartTooltip = React.memo((({dataPoint: dataPoint, datasetLabel: datasetLa
             x: newX,
             y: newY
         });
-    }), [ position, visible ]), visible && dataPoint ? reactDom.createPortal(jsxRuntime.jsx("div", {
+    }), [ position, visible ]), visible && dataPoint ?  reactDom.createPortal(jsxRuntime.jsx("div", {
         ref: tooltipRef,
         className: "c-chart__tooltip",
         style: {
@@ -6265,7 +6699,7 @@ const ChartTooltip = React.memo((({dataPoint: dataPoint, datasetLabel: datasetLa
 
 ChartTooltip.displayName = "ChartTooltip";
 
-const AreaChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, areaOptions: areaOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const AreaChart =  React.memo( React.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,
@@ -6320,7 +6754,11 @@ const AreaChart = React.memo(React.forwardRef((({datasets: datasets = [], config
                         })) ]
                     }, `dataset-${datasetIndex}`);
                 })), showTooltips && hoveredPoint && jsxRuntime.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: {
@@ -6469,7 +6907,7 @@ function useBarChart(datasets, options = {}) {
 
 AreaChart.displayName = "AreaChart";
 
-const BarChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, barOptions: barOptions = {}, horizontal: horizontal = !1, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const BarChart =  React.memo( React.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 jsxRuntime.jsx(BaseChart, {
         ref: ref,
@@ -6482,7 +6920,9 @@ const BarChart = React.memo(React.forwardRef((({datasets: datasets = [], config:
                         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? !0, barDimensions = calculateBarDimensions(renderedDatasets, scales.width, scales.height, scales.padding, horizontal);
             return jsxRuntime.jsxs(jsxRuntime.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 jsxRuntime.jsxs("g", {
                         children: [ jsxRuntime.jsx("rect", {
                             x: bar.x,
@@ -6524,7 +6964,7 @@ const BarChart = React.memo(React.forwardRef((({datasets: datasets = [], config:
 
 BarChart.displayName = "BarChart";
 
-const BubbleChart = React.memo(React.forwardRef((({bubbleData: bubbleData = [], config: config = {}, bubbleOptions: bubbleOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const BubbleChart =  React.memo( React.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, datasets = [ {
         label: "Bubbles",
         data: bubbleData
@@ -6580,7 +7020,7 @@ const BubbleChart = React.memo(React.forwardRef((({bubbleData: bubbleData = [],
             }));
             // Calculate bubble sizes based on data
                         return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [ bubbles, showTooltips && hoveredPoint && hoveredPoint.pointIndex < bubbleData.length && jsxRuntime.jsx(ChartTooltip, {
+                children: [ bubbles, showTooltips && hoveredPoint && hoveredPoint.pointIndex < bubbleData.length && bubbleData[hoveredPoint.pointIndex] && jsxRuntime.jsx(ChartTooltip, {
                     dataPoint: bubbleData[hoveredPoint.pointIndex],
                     datasetLabel: "Bubbles",
                     datasetColor: bubbleData[hoveredPoint.pointIndex]?.color || colorScheme[hoveredPoint.pointIndex % colorScheme.length],
@@ -6599,7 +7039,7 @@ const BubbleChart = React.memo(React.forwardRef((({bubbleData: bubbleData = [],
 
 BubbleChart.displayName = "BubbleChart";
 
-const CandlestickChart = React.memo(React.forwardRef((({candlestickData: candlestickData = [], config: config = {}, candlestickOptions: candlestickOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const CandlestickChart =  React.memo( React.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 jsxRuntime.jsx(BaseChart, {
@@ -6706,11 +7146,12 @@ const CandlestickChart = React.memo(React.forwardRef((({candlestickData: candles
                 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;
@@ -6747,7 +7188,7 @@ const CandlestickChart = React.memo(React.forwardRef((({candlestickData: candles
 
 CandlestickChart.displayName = "CandlestickChart";
 
-const DonutChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, pieOptions: pieOptions = {
+const DonutChart =  React.memo( React.forwardRef((({datasets: datasets = [], config: config = {}, pieOptions: pieOptions = {
     showValues: !1,
     showPercentages: !0,
     showLabels: !1,
@@ -6780,9 +7221,10 @@ const DonutChart = React.memo(React.forwardRef((({datasets: datasets = [], confi
         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(" ");
@@ -6862,7 +7304,7 @@ const DonutChart = React.memo(React.forwardRef((({datasets: datasets = [], confi
 
 DonutChart.displayName = "DonutChart";
 
-const FunnelChart = React.memo(React.forwardRef((({funnelData: funnelData = [], config: config = {}, funnelOptions: funnelOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const FunnelChart =  React.memo( React.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, datasets = [ {
         label: "Funnel Data",
         data: funnelData
@@ -6971,9 +7413,11 @@ const FunnelChart = React.memo(React.forwardRef((({funnelData: funnelData = [],
 
 FunnelChart.displayName = "FunnelChart";
 
-const GaugeChart = React.memo(React.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 =  React.memo( React.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, datasets = [ {
         label: "Gauge Value",
         data: [ {
@@ -7102,7 +7546,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 = React.memo(React.forwardRef((({data: data = [], config: config = {}, colorScale: colorScale = {
+}, HeatmapChart =  React.memo( React.forwardRef((({data: data = [], config: config = {}, colorScale: colorScale = {
     scheme: "viridis",
     steps: 9
 }, cellConfig: cellConfig = {
@@ -7300,7 +7744,8 @@ function useLineChart(datasets, options = {}) {
     }), [hoveredPoint, setHoveredPoint] = React.useState(null), calculateMovingAverage = React.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,
@@ -7311,7 +7756,7 @@ function useLineChart(datasets, options = {}) {
     }), []), calculateTrendLine = React.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,
@@ -7418,7 +7863,7 @@ function useLineChart(datasets, options = {}) {
 
 HeatmapChart.displayName = "HeatmapChart";
 
-const LineChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, lineOptions: lineOptions = {}, onDataPointClick: onDataPointClick, onRealTimeUpdate: onRealTimeUpdate, onZoomChange: onZoomChange, onPanChange: onPanChange, onBrushSelection: onBrushSelection, ...props}, ref) => {
+const LineChart =  React.memo( React.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,
@@ -7518,7 +7963,7 @@ const LineChart = React.memo(React.forwardRef((({datasets: datasets = [], config
 
 LineChart.displayName = "LineChart";
 
-const MultiAxisChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, yAxes: yAxes = [], xAxes: xAxes = [], multiAxisOptions: multiAxisOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const MultiAxisChart =  React.memo( React.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 jsxRuntime.jsx(BaseChart, {
         ref: ref,
@@ -7666,7 +8111,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 = React.useMemo((() => processedData.reduce(((sum, point) => sum + point.value), 0)), [ processedData ]), slices = React.useMemo((() => {
+    }), [ data, options.sortByValue ]), totalValue = React.useMemo((() => _reduceInstanceProperty(processedData).call(processedData, ((sum, point) => sum + point.value), 0)), [ processedData ]), slices = React.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
@@ -7753,7 +8198,7 @@ function usePieChart(data, options = {}) {
 
 MultiAxisChart.displayName = "MultiAxisChart";
 
-const PieChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, pieOptions: pieOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const PieChart =  React.memo( React.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 jsxRuntime.jsx(BaseChart, {
         ref: ref,
@@ -7818,7 +8263,7 @@ const PieChart = React.memo(React.forwardRef((({datasets: datasets = [], config:
 
 PieChart.displayName = "PieChart";
 
-const RadarChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, radarOptions: radarOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const RadarChart =  React.memo( React.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 jsxRuntime.jsx(BaseChart, {
         ref: ref,
@@ -7828,7 +8273,9 @@ const RadarChart = React.memo(React.forwardRef((({datasets: datasets = [], confi
         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) {
@@ -7891,18 +8338,18 @@ const RadarChart = React.memo(React.forwardRef((({datasets: datasets = [], confi
                         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 jsxRuntime.jsxs("g", {
@@ -7926,7 +8373,9 @@ const RadarChart = React.memo(React.forwardRef((({datasets: datasets = [], confi
                                 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);
@@ -7940,8 +8389,8 @@ const RadarChart = React.memo(React.forwardRef((({datasets: datasets = [], confi
             return jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [ jsxRuntime.jsxs("g", {
                     children: [ gridLines, dataPaths, axisLabels ]
-                }), showTooltips && hoveredPoint && jsxRuntime.jsx(ChartTooltip, {
-                    dataPoint: renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex],
+                }), showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && jsxRuntime.jsx(ChartTooltip, {
+                    dataPoint: renderedDatasets[hoveredPoint.datasetIndex].data[hoveredPoint.pointIndex],
                     datasetLabel: renderedDatasets[hoveredPoint.datasetIndex]?.label,
                     datasetColor: renderedDatasets[hoveredPoint.datasetIndex]?.color || colors[hoveredPoint.datasetIndex],
                     position: {
@@ -7959,7 +8408,7 @@ const RadarChart = React.memo(React.forwardRef((({datasets: datasets = [], confi
 
 RadarChart.displayName = "RadarChart";
 
-const ScatterChart = React.memo(React.forwardRef((({datasets: datasets = [], config: config = {}, scatterOptions: scatterOptions = {
+const ScatterChart =  React.memo( React.forwardRef((({datasets: datasets = [], config: config = {}, scatterOptions: scatterOptions = {
     pointRadius: 4,
     showLabels: !1,
     enableHoverEffects: !0
@@ -8015,8 +8464,8 @@ const ScatterChart = React.memo(React.forwardRef((({datasets: datasets = [], con
                 }, `point-${datasetIndex}-${pointIndex}`));
             }));
         })), jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [ points, showTooltips && hoveredPoint && jsxRuntime.jsx(ChartTooltip, {
-                dataPoint: renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex],
+            children: [ points, showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && jsxRuntime.jsx(ChartTooltip, {
+                dataPoint: renderedDatasets[hoveredPoint.datasetIndex].data[hoveredPoint.pointIndex],
                 datasetLabel: renderedDatasets[hoveredPoint.datasetIndex]?.label,
                 datasetColor: renderedDatasets[hoveredPoint.datasetIndex]?.color || colors[hoveredPoint.datasetIndex],
                 position: {
@@ -8033,7 +8482,7 @@ const ScatterChart = React.memo(React.forwardRef((({datasets: datasets = [], con
 
 ScatterChart.displayName = "ScatterChart";
 
-const TreemapChart = React.memo(React.forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = {
+const TreemapChart =  React.memo( React.forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = {
     scheme: "category"
 }, labelConfig: labelConfig = {
     showLabels: !0,
@@ -8056,9 +8505,11 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], 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 => {
@@ -8066,7 +8517,7 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], 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 ]);
@@ -8080,8 +8531,10 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], 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) {
@@ -8092,7 +8545,7 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], algorithm:
         }
     }), [ colorConfig, data ]), squarify = React.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));
@@ -8105,7 +8558,7 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], 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);
@@ -8114,7 +8567,7 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], 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);
@@ -8163,7 +8616,7 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], 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,
@@ -8237,7 +8690,7 @@ const TreemapChart = React.memo(React.forwardRef((({data: data = [], algorithm:
 
 TreemapChart.displayName = "TreemapChart";
 
-const WaterfallChart = React.memo(React.forwardRef((({waterfallData: waterfallData = [], config: config = {}, waterfallOptions: waterfallOptions = {}, onDataPointClick: onDataPointClick, ...props}, ref) => {
+const WaterfallChart =  React.memo( React.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)",
@@ -8492,7 +8945,7 @@ const SIZE_MAP = {
 
 ColorModeToggle.displayName = "ColorModeToggle";
 
-const Countdown = React.forwardRef((({target: target, show: show = [ "days", "hours", "minutes", "seconds" ], separator: separator = ":", focused: focused = !1, className: className = "", style: style, onComplete: onComplete}, ref) => {
+const Countdown =  React.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] = React.useState((() => new Date)), [completed, setCompleted] = React.useState(!1);
     React.useEffect((() => {
         if (completed) return;
@@ -8514,16 +8967,16 @@ const Countdown = React.forwardRef((({target: target, show: show = [ "days", "ho
         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
     }), jsxRuntime.jsx("div", {
@@ -8571,8 +9024,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 = React.useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
         const aValue = a[sortConfig.key], bValue = b[sortConfig.key];
@@ -8612,22 +9066,22 @@ const range = (start, end) => {
     const paginationRange = React.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);
@@ -8651,7 +9105,7 @@ const range = (start, end) => {
         },
         DOTS: "..."
     };
-}, PaginationNavButton = ({type: type, onClick: onClick, disabled: disabled, label: label, iconName: iconName}) => jsxRuntime.jsx("li", {
+}, PaginationNavButton =  React.memo((({type: type, onClick: onClick, disabled: disabled, label: label, iconName: iconName}) => jsxRuntime.jsx("li", {
     className: `c-pagination__item c-pagination__item--${type} ${disabled ? "is-disabled" : ""}`,
     "aria-disabled": disabled,
     children: jsxRuntime.jsx("button", {
@@ -8666,10 +9120,7 @@ const 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 =  React.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,
@@ -8749,9 +9200,9 @@ const range = (start, end) => {
         });
     }
     return paginationContent;
-};
+}));
 
-Pagination.displayName = "Pagination";
+Pagination.displayName = "Pagination", PaginationNavButton.displayName = "PaginationNavButton";
 
 /**
  * DataTable - A flexible and accessible data table component
@@ -8766,7 +9217,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 =  React.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 = React.useRef(null), {displayData: displayData, sortConfig: sortConfig, currentPage: currentPage, totalPages: totalPages, handleSort: handleSort, handlePageChange: handlePageChange, handleSearch: handleSearch} = useDataTable({
         data: data,
         columns: columns,
@@ -8869,7 +9320,7 @@ const DataTable = ({data: data, columns: columns, className: className, style: s
             })
         }) ]
     });
-};
+}));
 
 /**
  * Get the name of a month by its index (0-11)
@@ -9109,7 +9560,7 @@ function formatDate(date, format) {
  * Supports various display modes, date ranges, and customization options.
  */ DataTable.displayName = "DataTable";
 
-const DatePicker = React.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 =  React.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: 
@@ -9409,12 +9860,63 @@ const DatePicker = React.forwardRef((({value: value, onChange: onChange, selecti
 DatePicker.displayName = "DatePicker";
 
 // Create context for dropdown state management
-const DropdownContext = React.createContext({
+const DropdownContext =  React.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 =  React.memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
+    const {close: close} = React.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 href && !disabled ? jsxRuntime.jsx("li", {
+        children: LinkComponent ? (() => {
+            const Component = LinkComponent;
+            return jsxRuntime.jsxs(Component, {
+                ...linkProps,
+                children: [ icon && jsxRuntime.jsx("span", {
+                    className: "c-dropdown__menu-item-icon",
+                    children: icon
+                }), children ]
+            });
+        })() : jsxRuntime.jsxs("a", {
+            ...linkProps,
+            children: [ icon && jsxRuntime.jsx("span", {
+                className: "c-dropdown__menu-item-icon",
+                children: icon
+            }), children ]
+        })
+    }) : jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsxs("button", {
+            type: "button",
+            className: itemClasses,
+            onClick: handleClick,
+            disabled: disabled,
+            role: "menuitem",
+            tabIndex: 0,
+            ...props,
+            children: [ icon && jsxRuntime.jsx("span", {
+                className: "c-dropdown__menu-item-icon",
+                children: icon
+            }), children ]
+        })
+    });
+})), DropdownDivider =  React.memo((({className: className = ""}) => jsxRuntime.jsx("li", {
+    className: `c-dropdown__divider ${className}`,
+    role: "separator"
+}))), DropdownHeader =  React.memo((({children: children, className: className = ""}) => jsxRuntime.jsx("li", {
+    className: `c-dropdown__header ${className}`,
+    children: children
+}))), Dropdown =  React.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] = React.useState(!1), isControlled = void 0 !== controlledIsOpen, isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen, dropdownRef = React.useRef(null), toggleRef = React.useRef(null), menuRef = React.useRef(null), dropdownId = React.useRef(`dropdown-${Math.random().toString(36).substring(2, 9)}`).current, setIsOpen = React.useCallback((nextIsOpen => {
         isControlled || setUncontrolledIsOpen(nextIsOpen), onOpenChange && onOpenChange(nextIsOpen);
@@ -9518,7 +10020,8 @@ const DropdownContext = React.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,
@@ -9534,10 +10037,10 @@ const DropdownContext = React.createContext({
             })() : menuContent
         }) ]
     });
-};
+}));
 
 /**
- * Dropdown component for creating dropdown menus
+ * DropdownItem component for menu items
  */
 /**
  * EdgePanel state and functionality
@@ -9656,15 +10159,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 React.useEffect((() => (isOpen && defaultProps.closeOnEscape && document.addEventListener("keydown", handleEscapeKey), 
     () => {
         document.removeEventListener("keydown", handleEscapeKey);
     })), [ isOpen, handleEscapeKey, defaultProps.closeOnEscape ]), 
     /**
-     * Set initial transform values
-     */
+   * Set initial transform values
+   */
     React.useEffect((() => {
         if (containerRef.current) {
             const {position: position, mode: mode} = defaultProps;
@@ -9674,8 +10177,8 @@ function useEdgePanel(initialProps) {
         }
     }), [ defaultProps.mode, defaultProps.position, defaultProps.glass, isOpen ]), 
     /**
-     * Sync with prop changes
-     */
+   * Sync with prop changes
+   */
     React.useEffect((() => {
         void 0 !== defaultProps.isOpen && defaultProps.isOpen !== isOpen && (defaultProps.isOpen ? openPanel(!!defaultProps.glass) : closePanel(!!defaultProps.glass));
     }), [ defaultProps.isOpen, closePanel, isOpen, openPanel, defaultProps.glass ]), 
@@ -9737,7 +10240,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({
@@ -9851,7 +10355,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 =  React.memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
     const {generateCheckboxClass: generateCheckboxClass, checkboxRef: checkboxRef} = useCheckbox({
         indeterminate: indeterminate,
         disabled: disabled,
@@ -9905,7 +10409,7 @@ function useCheckbox(initialProps) {
         });
     }
     return checkboxContent;
-};
+}));
 
 /**
  * Form state and functionality
@@ -9919,10 +10423,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 : "";
@@ -9977,10 +10481,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 : "";
@@ -10041,10 +10545,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" : "";
@@ -10067,7 +10571,7 @@ function useInput(initialProps) {
  * Input - A component for text input fields
  */ FormGroup.displayName = "FormGroup";
 
-const Input = React.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 =  React.memo( React.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,
@@ -10130,7 +10634,7 @@ const Input = React.forwardRef((({type: type = "text", value: value, onChange: o
         });
     }
     return inputElement;
-}));
+})));
 
 /**
  * Hook for Hero component functionality
@@ -10149,25 +10653,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] = React.useState(0), [isTransitioning, setIsTransitioning] = React.useState(!1), autoplayRef = React.useRef(null), isPausedRef = React.useRef(!1), slideRefs = React.useMemo((() => slides.map((() => React__default.default.createRef()))), [ slides.length ]), videoRefs = React.useMemo((() => slides.map((() => React__default.default.createRef()))), [ slides.length ]), handleSlideTransition = React.useCallback((nextIndex => {
+        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = React.useState(0), [isTransitioning, setIsTransitioning] = React.useState(!1), autoplayRef = React.useRef(null), isPausedRef = React.useRef(!1), slideRefs = React.useMemo((() => slides.map((() =>  React__default.default.createRef()))), [ slides.length ]), videoRefs = React.useMemo((() => slides.map((() =>  React__default.default.createRef()))), [ slides.length ]), handleSlideTransition = React.useCallback((nextIndex => {
             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);
@@ -10223,7 +10727,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));
@@ -10306,8 +10816,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
@@ -10371,10 +10881,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;
@@ -10396,10 +10906,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;
@@ -10425,10 +10935,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(".", "");
@@ -10510,10 +11020,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;
@@ -10524,9 +11034,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,
@@ -10557,9 +11067,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 : "";
@@ -10684,7 +11194,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)), {});
 }
 
@@ -10692,7 +11203,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)), {});
 }
 
 /**
@@ -10725,11 +11237,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
@@ -10814,31 +11335,121 @@ 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";
 
-var utilsImport =  Object.freeze({
+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"
+} ];
+
+/**
+ * Utility Functions Exports
+ */ var utilsImport =  Object.freeze({
     __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
 });
 
 /**
@@ -11000,10 +11611,10 @@ var utilsImport =  Object.freeze({
         ...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;
@@ -11029,10 +11640,10 @@ var utilsImport =  Object.freeze({
         ...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;
@@ -11058,10 +11669,10 @@ var utilsImport =  Object.freeze({
         ...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}` : "";
@@ -11357,7 +11968,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,
@@ -11385,14 +11996,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
@@ -11474,7 +12095,7 @@ var composablesImport =  Object.freeze({
 
 /**
  * Select - A component for dropdown selection
- */ const 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}) => {
+ */ const Select =  React.memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
     const {generateSelectClass: generateSelectClass} = useSelect({
         size: size,
         disabled: disabled,
@@ -11613,14 +12234,14 @@ var composablesImport =  Object.freeze({
         });
     }
     return selectContent;
-};
+}));
 
 Select.displayName = "Select";
 
 /**
  * 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 =  React.memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
     const {generateRadioClass: generateRadioClass} = useRadio({
         disabled: disabled,
         invalid: invalid,
@@ -11671,14 +12292,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 = React.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 =  React.memo( React.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,
@@ -11736,7 +12357,7 @@ const Textarea = React.forwardRef((({value: value, onChange: onChange, onBlur: o
         });
     }
     return textareaElement;
-}));
+})));
 
 Textarea.displayName = "Textarea";
 
@@ -11749,7 +12370,7 @@ Textarea.displayName = "Textarea";
  * <FooterSocialLink platform="custom" url="https://example.com" icon={<CustomIcon />} label="Custom Platform" />
  * ```
  */
-const FooterSocialLink = React.forwardRef((({platform: platform, url: url, icon: icon, label: label, size: size = "md", variant: variant = "default", disabled: disabled = !1, className: className = "", ...props}, ref) => {
+const FooterSocialLink =  React.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",
@@ -11834,7 +12455,7 @@ FooterSocialLink.displayName = "FooterSocialLink";
  * </Grid>
  * ```
  */
-const Grid = React.forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, direction: direction, wrap: wrap, ...props}, ref) => {
+const Grid =  React.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}`), 
@@ -11853,7 +12474,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 = React.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 =  React.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 && (
@@ -11896,7 +12517,7 @@ GridCol.displayName = "GridCol";
  * </Container>
  * ```
  */
-const Row = React.forwardRef((({children: children, className: className = "", justifyContent: justifyContent, alignItems: alignItems, noGutters: noGutters, ...props}, ref) => {
+const Row =  React.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), 
@@ -11933,7 +12554,7 @@ Row.displayName = "Row";
  * </Footer>
  * ```
  */
-const Footer = React.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 =  React.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
@@ -12064,7 +12685,7 @@ const Footer = React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDesc
                     alignItems: "centered" === layout || "stacked" === layout ? "center" : void 0,
                     children: React__default.default.Children.map(children, (child => 
                     // Check if the child is a valid React element
-                    React__default.default.isValidElement(child) ? React__default.default.cloneElement(child, {
+                     React__default.default.isValidElement(child) ?  React__default.default.cloneElement(child, {
                         showNewsletter: showNewsletter
                     }) : child))
                 })
@@ -12153,7 +12774,7 @@ Footer.displayName = "Footer";
  * </MasonryGrid>
  * ```
  */
-const MasonryGrid = React.forwardRef((({children: children, className: className = "", xs: xs = 1, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, gap: gap = 16, animate: animate = !0, imagesLoaded: imagesLoaded = !0, onLayoutComplete: onLayoutComplete, onImageLoad: onImageLoad, ...props}, ref) => {
+const MasonryGrid =  React.forwardRef((({children: children, className: className = "", xs: xs = 1, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, gap: gap = 16, animate: animate = !0, imagesLoaded: imagesLoaded = !0, onLayoutComplete: onLayoutComplete, onImageLoad: onImageLoad, ...props}, ref) => {
     // === REFS & STATE ===
     const [columns, setColumns] = React.useState(xs), [positions, setPositions] = React.useState([]), [layoutComplete, setLayoutComplete] = React.useState(!1), [loadingImages, setLoadingImages] = React.useState(!1), containerRef = React.useRef(null), columnHeights = React.useRef([]), imagesLoadedCount = React.useRef(0), totalImagesCount = React.useRef(0), imageElements = React.useRef(new Map);
     React.useEffect((() => {
@@ -12176,11 +12797,11 @@ const MasonryGrid = React.forwardRef((({children: children, className: className
     React.useEffect((() => {
         const newItems = [];
         React.Children.forEach(children, ((child, index) => {
-            React.isValidElement(child) && newItems.push({
+             React.isValidElement(child) && newItems.push({
                 id: child.key?.toString() || `masonry-item-${index}`,
                 element: child,
                 position: null,
-                ref: React__default.default.createRef()
+                ref:  React__default.default.createRef()
             });
         })), setItems(newItems);
     }), [ children ]);
@@ -12338,7 +12959,7 @@ MasonryGrid.displayName = "MasonryGrid";
  * </MasonryGrid>
  * ```
  */
-const MasonryGridItem = React.forwardRef((({children: children, className: className = "", ...props}, ref) => {
+const MasonryGridItem =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => {
     const classes = [ "o-masonry-grid__item-inner" ];
     return className && classes.push(className), jsxRuntime.jsx("div", {
         ref: ref,
@@ -12371,7 +12992,7 @@ var layouts =  Object.freeze({
  *   <FooterLink href="/product2">Product 2</FooterLink>
  * </FooterSection>
  * ```
- */ const FooterSection = React.forwardRef((({title: title, icon: icon, collapsible: collapsible = !1, defaultCollapsed: defaultCollapsed = !1, showNewsletter: showNewsletter = !1, children: children, className: className = "", ...props}, ref) => {
+ */ const FooterSection =  React.forwardRef((({title: title, icon: icon, collapsible: collapsible = !1, defaultCollapsed: defaultCollapsed = !1, showNewsletter: showNewsletter = !1, children: children, className: className = "", ...props}, ref) => {
     const [isCollapsed, setIsCollapsed] = React__default.default.useState(defaultCollapsed), sectionClass = [ "c-footer__section", collapsible && "c-footer__section--collapsible", isCollapsed && "c-footer__section--collapsed", className ].filter(Boolean).join(" ");
     return jsxRuntime.jsx(GridCol, {
         xs: 12,
@@ -12435,7 +13056,7 @@ FooterSection.displayName = "FooterSection";
  * </FooterLink>
  * ```
  */
-const FooterLink = React.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 =  React.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,
@@ -12701,33 +13322,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 =  React.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 jsxRuntime.jsx(ListElement, {
         className: listClasses,
         style: style,
         ...props,
-        children: React__default.default.Children.map(children, (child => (React__default.default.isValidElement(child), 
-        jsxRuntime.jsx("li", {
+        children: React__default.default.Children.map(children, (child => jsxRuntime.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__default.default.Children.toArray(children).filter((child => React__default.default.isValidElement(child) && child.type === List));
+    const listGroupClasses = [ LIST_GROUP.BASE_CLASS, className ].filter(Boolean).join(" "), validLists = React__default.default.Children.toArray(children).filter((child =>  React__default.default.isValidElement(child) && child.type === List));
     // Get valid List children
         return jsxRuntime.jsx("div", {
         className: listGroupClasses,
         style: style,
         children: validLists.map(((child, index) => {
             const childProps = child.props;
+            
             return React__default.default.cloneElement(child, {
                 key: index,
                 variant: childProps?.variant ?? variant
@@ -12936,7 +13558,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 =  React.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 = React.useRef(null), dialogRef = React.useRef(null), backdropRef = React.useRef(null), {isOpen: isOpenState, open: open, close: close} = 
     /**
  * Hook for managing modal state
@@ -13045,7 +13667,8 @@ const Modal = ({children: children, isOpen: isOpen = !1, onOpenChange: onOpenCha
         }), jsxRuntime.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,
@@ -13064,7 +13687,7 @@ const Modal = ({children: children, isOpen: isOpen = !1, onOpenChange: onOpenCha
             })() : modalContent
         }) ]
     });
-};
+}));
 
 Modal.displayName = "Modal";
 
@@ -13083,7 +13706,7 @@ Modal.displayName = "Modal";
  * </Nav>
  * ```
  */
-const Nav = React.forwardRef((({children: children, alignment: alignment = "start", variant: variant = "default", className: className = "", disabled: disabled = !1, glass: glass}, ref) => {
+const Nav =  React.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
@@ -13097,8 +13720,9 @@ const Nav = React.forwardRef((({children: children, alignment: alignment = "star
         role: "menubar",
         "aria-orientation": "horizontal",
         children: React__default.default.Children.map(children, (child => {
-            if (React__default.default.isValidElement(child)) {
+            if ( React__default.default.isValidElement(child)) {
                 const childProps = child.props;
+                
                 return React__default.default.cloneElement(child, {
                     ...childProps,
                     disabled: !!disabled || childProps?.disabled
@@ -13155,7 +13779,7 @@ Nav.displayName = "Nav";
  * </NavItem>
  * ```
  */
-const NavItem = React.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 =  React.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,
@@ -13236,7 +13860,7 @@ NavItem.displayName = "NavItem";
  * </Navbar>
  * ```
  */
-const Navbar = React.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 =  React.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,
@@ -13379,13 +14003,13 @@ function setRef(ref, value) {
  * ```
  */ Navbar.displayName = "Navbar";
 
-const SideMenuList = React.forwardRef((({children: children, className: className = ""}, ref) => {
+const SideMenuList =  React.forwardRef((({children: children, className: className = ""}, ref) => {
     const listClass = `c-side-menu__list ${className}`.trim();
     return jsxRuntime.jsx("ul", {
         ref: ref,
         className: listClass,
         role: "list",
-        children: React__default.default.Children.map(children, ((child, index) => React__default.default.isValidElement(child) ? jsxRuntime.jsx("li", {
+        children: React__default.default.Children.map(children, ((child, index) =>  React__default.default.isValidElement(child) ? jsxRuntime.jsx("li", {
             className: "c-side-menu__item",
             role: "listitem",
             children: child
@@ -13420,7 +14044,7 @@ SideMenuList.displayName = "SideMenuList";
  * </SideMenuItem>
  * ```
  */
-const SideMenuItem = React.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 =  React.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,
@@ -13507,7 +14131,7 @@ const SideMenuItem = React.forwardRef((({children: children, href: href, onClick
 SideMenuItem.displayName = "SideMenuItem";
 
 // Context for passing LinkComponent to SideMenuItem children
-const SideMenuContext = React.createContext({}), useSideMenuContext = () => React.useContext(SideMenuContext)
+const SideMenuContext =  React.createContext({}), useSideMenuContext = () => React.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.
@@ -13522,7 +14146,7 @@ const SideMenuContext = React.createContext({}), useSideMenuContext = () => Reac
  *   </SideMenuList>
  * </SideMenu>
  * ```
- */ , SideMenu = React.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 =  React.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,
@@ -13725,7 +14349,7 @@ const SideMenuContext = React.createContext({}), useSideMenuContext = () => Reac
 // Hook to use SideMenu context
 SideMenu.displayName = "SideMenu";
 
-const Menu = React.forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsxRuntime.jsx("div", {
+const Menu =  React.forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsxRuntime.jsx("div", {
     ref: ref,
     className: `c-menu ${className}`,
     style: style,
@@ -13733,9 +14357,10 @@ const Menu = React.forwardRef((({children: children, className: className = "",
         className: "c-menu__list",
         role: "menu",
         children: React__default.default.Children.map(children, (child => {
-            if (React__default.default.isValidElement(child)) {
+            if ( React__default.default.isValidElement(child)) {
                 // Pass disabled prop down to all children if Menu is disabled
                 const childProps = child.props;
+                
                 return React__default.default.cloneElement(child, {
                     ...childProps,
                     disabled: !!disabled || childProps?.disabled
@@ -13744,7 +14369,11 @@ const Menu = React.forwardRef((({children: children, className: className = "",
             return child;
         }))
     })
-}))), MenuItem = React.forwardRef((({children: children, href: href = "#", icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => {
+})));
+
+Menu.displayName = "Menu";
+
+const MenuItem =  React.forwardRef((({children: children, href: href = "#", icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => {
     const itemClass = `c-menu__item ${active ? "is-active" : ""} ${disabled ? "is-disabled" : ""} ${className}`;
     return jsxRuntime.jsx("li", {
         ref: ref,
@@ -13771,7 +14400,12 @@ const Menu = React.forwardRef((({children: children, className: className = "",
             })), 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",
@@ -13785,11 +14419,15 @@ const Menu = React.forwardRef((({children: children, className: className = "",
     bell: "Bell",
     search: "MagnifyingGlass"
 }[luxIconName] || "Circle") // Default to Circle if no mapping found
-, MenuDivider = React.forwardRef((({className: className = ""}, ref) => jsxRuntime.jsx("li", {
+, MenuDivider =  React.forwardRef((({className: className = ""}, ref) => jsxRuntime.jsx("li", {
     ref: ref,
     className: `c-menu__divider ${className}`,
     role: "separator"
-}))), MegaMenu = React.forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsxRuntime.jsx("div", {
+})));
+
+MenuDivider.displayName = "MenuDivider";
+
+const MegaMenu =  React.forwardRef((({children: children, className: className = "", style: style, disabled: disabled = !1}, ref) => jsxRuntime.jsx("div", {
     ref: ref,
     className: `c-menu c-menu--mega ${className}`,
     style: style,
@@ -13798,9 +14436,10 @@ const Menu = React.forwardRef((({children: children, className: className = "",
         children: jsxRuntime.jsx("div", {
             className: "c-menu__grid o-grid",
             children: React__default.default.Children.map(children, (child => {
-                if (React__default.default.isValidElement(child)) {
+                if ( React__default.default.isValidElement(child)) {
                     // Pass disabled prop down to all children if MegaMenu is disabled
                     const childProps = child.props;
+                    
                     return React__default.default.cloneElement(child, {
                         ...childProps,
                         disabled: !!disabled || childProps?.disabled
@@ -13810,7 +14449,11 @@ const Menu = React.forwardRef((({children: children, className: className = "",
             }))
         })
     })
-}))), MegaMenuColumn = React.forwardRef((({title: title, icon: icon, children: children, width: width = "auto", className: className = "", disabled: disabled = !1}, ref) => {
+})));
+
+MegaMenu.displayName = "MegaMenu";
+
+const MegaMenuColumn =  React.forwardRef((({title: title, icon: icon, children: children, width: width = "auto", className: className = "", disabled: disabled = !1}, ref) => {
     const columnClass = `o-grid__col o-grid__col--${width} ${className}`;
     return jsxRuntime.jsxs("div", {
         ref: ref,
@@ -13835,13 +14478,13 @@ const Menu = React.forwardRef((({children: children, className: className = "",
             className: "c-menu__subitems-list",
             role: "menu",
             children: React__default.default.Children.map(children, (child => {
-                if (React__default.default.isValidElement(child)) {
+                if ( React__default.default.isValidElement(child)) {
                     // Pass disabled prop down to all children if column is disabled
                     const childProps = child.props;
                     return jsxRuntime.jsx("li", {
                         className: "c-menu__subitem",
                         role: "menuitem",
-                        children: React__default.default.cloneElement(child, {
+                        children:  React__default.default.cloneElement(child, {
                             ...childProps,
                             disabled: !!disabled || childProps?.disabled
                         })
@@ -13851,7 +14494,11 @@ const Menu = React.forwardRef((({children: children, className: className = "",
             }))
         }) ]
     });
-})), MegaMenuLink = React.forwardRef((({href: href, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => jsxRuntime.jsx("a", {
+}));
+
+MegaMenuColumn.displayName = "MegaMenuColumn";
+
+const MegaMenuLink =  React.forwardRef((({href: href, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => jsxRuntime.jsx("a", {
     ref: ref,
     href: href,
     className: `c-menu__subitem-link ${disabled ? "is-disabled" : ""} ${className}`,
@@ -13860,7 +14507,11 @@ const Menu = React.forwardRef((({children: children, className: className = "",
     },
     "aria-disabled": disabled,
     children: children
-}))), NavDropdown = React.forwardRef((({title: title, children: children, alignment: alignment = "start", megaMenu: megaMenu = !1, className: className = "", style: style, disabled: disabled = !1}, ref) => {
+})));
+
+MegaMenuLink.displayName = "MegaMenuLink";
+
+const NavDropdown =  React.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
@@ -14500,12 +15151,13 @@ React.useEffect((() => {
                 };
             }));
         }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), handleWheel = React.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;
@@ -15049,7 +15701,7 @@ React.useEffect((() => {
 /**
  * Hook for managing popover state and positioning logic
  */
-const PopoverContext = React.createContext({
+const PopoverContext =  React.createContext({
     isOpen: !1,
     setIsOpen: () => {},
     triggerRef: {
@@ -15234,7 +15886,7 @@ const PopoverContext = React.createContext({
             popoverId: popoverId,
             triggerType: trigger
         },
-        children: [ children, "undefined" != typeof document && reactDom.createPortal(jsxRuntime.jsxs("div", {
+        children: [ children, "undefined" != typeof document &&  reactDom.createPortal(jsxRuntime.jsxs("div", {
             ref: popoverRef,
             className: `c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ""} ${glass ? "c-popover--glass" : ""} ${className}`,
             style: style,
@@ -15281,10 +15933,7 @@ const PopoverContext = React.createContext({
 };
 
 // Context to share popover state between components
-/**
- * PopoverTrigger component to wrap the element that triggers the popover
- */
-React.forwardRef((({children: children, trigger: triggerProp}, ref) => {
+ React.forwardRef((({children: children, trigger: triggerProp}, ref) => {
     const {isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, popoverId: popoverId, triggerType: triggerType} = React__default.default.useContext(PopoverContext), effectiveTrigger = triggerProp || triggerType, child = React__default.default.Children.only(children), triggerProps = {
         ref: ref || triggerRef,
         "aria-describedby": popoverId,
@@ -15297,13 +15946,13 @@ React.forwardRef((({children: children, trigger: triggerProp}, ref) => {
         setIsOpen(!0);
     }, triggerProps.onMouseLeave = () => {
         setIsOpen(!1);
-    }), React__default.default.cloneElement(child, triggerProps);
-})), Popover.displayName = "Popover";
+    }),  React__default.default.cloneElement(child, triggerProps);
+})).displayName = "PopoverTrigger", Popover.displayName = "Popover";
 
 /**
  * Hook for managing rating component state and interactions
  */
-const Rating = React.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 =  React.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 = React.useRef(null), ratingInstance = React.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] = React.useState(value), [hoverValue, setHoverValue] = React.useState(null), [focusedIndex, setFocusedIndex] = React.useState(null), currentValue = isControlled ? value : internalValue, handleMouseEnter = React.useCallback((starValue => {
@@ -15364,7 +16013,7 @@ const Rating = React.forwardRef((({value: valueProp = 0, defaultValue: defaultVa
         allowHalf: allowHalf,
         readOnly: readOnly,
         onChange: onChange
-    }), handleMouseEnter = React.useCallback(((e, starValue) => {
+    }), forkedRef = useForkRef(internalRef, ref), handleMouseEnter = React.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;
@@ -15415,7 +16064,7 @@ const Rating = React.forwardRef((({value: valueProp = 0, defaultValue: defaultVa
     // If using vanilla JS, just render the container
         if (useVanillaJS) return jsxRuntime.jsx("div", {
         className: ratingClasses,
-        ref: useForkRef(internalRef, ref),
+        ref: forkedRef,
         id: id,
         ...restProps
     });
@@ -15423,7 +16072,7 @@ const Rating = React.forwardRef((({value: valueProp = 0, defaultValue: defaultVa
     // Determine the effective value (either hovered or actual)
         const effectiveValue = null !== hoverValue ? hoverValue : currentValue, ratingContent = jsxRuntime.jsx("div", {
         className: ratingClasses,
-        ref: useForkRef(internalRef, ref),
+        ref: forkedRef,
         id: id,
         style: style,
         "data-readonly": readOnly ? "true" : "false",
@@ -15628,7 +16277,7 @@ ProductReview.displayName = "ProductReview";
 /**
  * Hook for managing Progress component state and behavior
  */
-const Progress = React.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 =  React.memo( React.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";
@@ -15678,7 +16327,14 @@ const Progress = React.forwardRef((({value: value, variant: variant = "primary",
         });
     }
     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,
@@ -15856,9 +16512,22 @@ const SectionIntro = ({title: title, label: label, text: text, actions: actions,
 
 SectionIntro.displayName = "SectionIntro";
 
-const Slider = React.forwardRef(((props, ref) => {
-    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props;
-    if (!slides || 0 === slides.length) return jsxRuntime.jsx("div", {
+const Slider =  React.forwardRef(((props, ref) => {
+    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, 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 = React.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 jsxRuntime.jsx("div", {
         className: "c-slider c-slider--empty",
         style: {
             height: height,
@@ -15870,19 +16539,7 @@ const Slider = React.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 = React.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 jsxRuntime.jsxs("div", {
         ref: ref || containerRef,
         className: containerClasses,
@@ -16048,7 +16705,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 =  React.memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass}) => {
     const [currentTab, setCurrentTab] = React.useState(activeIndex), tabContent = jsxRuntime.jsxs("div", {
         className: `c-tabs js-atomix-tab ${className}`,
         style: style,
@@ -16109,7 +16766,7 @@ const Tabs = ({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDE
         });
     }
     return tabContent;
-};
+}));
 
 Tabs.displayName = "Tabs";
 
@@ -16273,13 +16930,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"}`
                         }), jsxRuntime.jsx("span", {
@@ -16289,11 +16945,10 @@ const Todo = ({items: items = [], title: title = "Todo List", onAddTodo: onAddTo
                     }), jsxRuntime.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: jsxRuntime.jsx(Icon, {
@@ -16359,7 +17014,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 =  React.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] = React.useState(!1), [isPositioned, setIsPositioned] = React.useState(!1), [tooltipStyle, setTooltipStyle] = React.useState({}), [arrowStyle, setArrowStyle] = React.useState({}), timeoutRef = React.useRef(null), triggerRef = React.useRef(null), tooltipRef = React.useRef(null), tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`, showTooltip = React.useCallback((() => {
             timeoutRef.current && clearTimeout(timeoutRef.current), delay > 0 ? timeoutRef.current = setTimeout((() => {
@@ -16536,7 +17191,7 @@ const Tooltip = ({content: content, children: children, position: position = TOO
             })()
         }) ]
     });
-};
+}));
 
 /**
  * Get arrow size from CSS custom property
@@ -16699,13 +17354,14 @@ Upload.displayName = "Upload";
 /**
  * Advanced Video Player Component
  */
-const VideoPlayer = React.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 =  React.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 = React.useRef(null), containerRef = React.useRef(null), canvasRef = React.useRef(null), iframeRef = React.useRef(null), [containerBorderRadius, setContainerBorderRadius] = React.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] = React.useState(!1), [currentTime, setCurrentTime] = React.useState(0), [duration, setDuration] = React.useState(0), [volume, setVolumeState] = React.useState(1), [isMuted, setIsMuted] = React.useState(!1), [isFullscreen, setIsFullscreen] = React.useState(!1), [isPictureInPicture, setIsPictureInPicture] = React.useState(!1), [isLoading, setIsLoading] = React.useState(!1), [buffered, setBuffered] = React.useState(0), [playbackRate, setPlaybackRateState] = React.useState(1), [currentQuality, setCurrentQuality] = React.useState(quality?.[0] || null), [showControls, setShowControls] = React.useState(!0), controlsTimeoutRef = React.useRef(null), resetControlsTimeout = React.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 = React.useCallback((async () => {
             if (videoRef.current) try {
                 await videoRef.current.play(), setIsPlaying(!0), onPlay?.();
@@ -16740,7 +17396,7 @@ const VideoPlayer = React.forwardRef((({src: src, type: type = "video", youtubeI
                 console.error("Picture-in-picture error:", error);
             }
         }), [ videoRef, isPictureInPicture ]), setPlaybackRate = React.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 = React.useCallback((newQuality => {
             if (videoRef.current && quality) {
@@ -17584,41 +18240,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
@@ -17638,9 +18290,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,
@@ -17704,7 +18357,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 {
@@ -17738,13 +18394,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());
 }
 
 /**
@@ -17793,8 +18458,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,
@@ -17831,8 +18496,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}`, {
@@ -17845,20 +18510,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));
     }
 }
@@ -18001,11 +18666,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
@@ -18068,8 +18728,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 {
@@ -18119,8 +18779,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,
@@ -18132,23 +18792,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,
@@ -18167,34 +18827,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;
@@ -18209,17 +18869,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 {
@@ -18235,8 +18896,8 @@ class ThemeRegistry {
         };
     }
     /**
-     * Clear registry
-     */    clear() {
+   * Clear registry
+   */    clear() {
         this.entries.clear(), this.config = null, this.initialized = !1;
     }
 }
@@ -18267,8 +18928,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 ? 
@@ -18279,8 +18940,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 ? 
@@ -18291,8 +18952,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();
@@ -18308,8 +18969,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();
@@ -18323,8 +18984,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 && (
@@ -18333,19 +18994,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 {
@@ -18356,19 +19017,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; ) {
@@ -18496,8 +19157,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), 
@@ -18531,8 +19192,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) {
@@ -18576,8 +19237,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"), 
@@ -18591,8 +19252,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
@@ -18609,8 +19270,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" ];
@@ -18633,8 +19294,8 @@ function isJSTheme(theme) {
         };
     }
     /**
-     * Check color contrast ratio
-     */    checkContrast(foreground, background) {
+   * Check color contrast ratio
+   */    checkContrast(foreground, background) {
         try {
             return getContrastRatio(foreground, background);
         } catch {
@@ -18642,15 +19303,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,
@@ -18682,8 +19343,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,
@@ -18694,7 +19355,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 {
@@ -18705,8 +19368,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"), 
         {
@@ -18752,8 +19415,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,
@@ -18810,7 +19473,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
@@ -19310,28 +19973,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) {
@@ -19396,16 +20059,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);
@@ -19447,8 +20110,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) {
@@ -19472,8 +20135,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);
@@ -19492,15 +20155,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, {
@@ -19514,8 +20177,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;
@@ -19529,35 +20192,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) {
@@ -19567,8 +20230,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) {
@@ -19578,8 +20241,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) {
@@ -19589,9 +20252,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) {
@@ -19602,8 +20265,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) {
@@ -19627,15 +20290,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",
@@ -19667,66 +20339,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
@@ -19738,16 +20410,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);
@@ -19759,17 +20431,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",
@@ -19786,8 +20458,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"), 
@@ -19796,14 +20468,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 = {
@@ -19833,10 +20497,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: [],
@@ -19908,8 +20572,8 @@ class RTLManager {
         this.initialize();
     }
     /**
-     * Initialize the theme manager
-     */    initialize() {
+   * Initialize the theme manager
+   */    initialize() {
         this.initialized || isServer() || (
         // Initialize engine
         this.engine.initialize().then((() => {
@@ -19947,8 +20611,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
                     });
@@ -19962,8 +20627,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);
@@ -19978,8 +20643,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";
@@ -19989,39 +20654,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) {
@@ -20031,8 +20696,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) {
@@ -20042,8 +20707,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
@@ -20063,28 +20728,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: [],
@@ -20105,7 +20770,7 @@ class RTLManager {
  */
 /**
  * Theme context with default values
- */ const ThemeContext = React.createContext(null);
+ */ const ThemeContext =  React.createContext(null);
 
 ThemeContext.displayName = "ThemeContext";
 
@@ -20481,7 +21146,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
@@ -20578,25 +21243,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
     // ============================================================================
@@ -20823,7 +21469,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),
@@ -20999,11 +21645,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) {
@@ -21029,7 +21670,7 @@ function createThemeFromConfig(config) {
             mode: "dark",
             background: {
                 default: "#121212",
-                paper: "#1e1e1e"
+                subtle: "#1e1e1e"
             },
             text: {
                 primary: "#ffffff",
@@ -21094,8 +21735,8 @@ function exportTheme(theme) {
         this.commands = new Map, this.registerDefaultCommands();
     }
     /**
-     * Register default commands
-     */    registerDefaultCommands() {
+   * Register default commands
+   */    registerDefaultCommands() {
         this.register({
             name: "validate",
             description: "Validate theme configuration",
@@ -21139,13 +21780,13 @@ function exportTheme(theme) {
         });
     }
     /**
-     * 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);
@@ -21159,8 +21800,8 @@ function exportTheme(theme) {
         }
     }
     /**
-     * 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];
@@ -21175,8 +21816,8 @@ function exportTheme(theme) {
         };
     }
     /**
-     * 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 => {})), 
@@ -21186,8 +21827,8 @@ function exportTheme(theme) {
         }
     }
     /**
-     * Handle list command
-     */    handleList(args, options) {
+   * Handle list command
+   */    handleList(args, options) {
         try {
             const themes = loadThemeConfig().themes || {};
             if (0 === Object.keys(themes).length) return;
@@ -21198,8 +21839,8 @@ function exportTheme(theme) {
         }
     }
     /**
-     * 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));
@@ -21212,8 +21853,8 @@ function exportTheme(theme) {
         }
     }
     /**
-     * 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));
@@ -21232,8 +21873,8 @@ function exportTheme(theme) {
         }
     }
     /**
-     * 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));
@@ -21246,8 +21887,8 @@ function exportTheme(theme) {
         }
     }
     /**
-     * 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)) ;
     }
 }
@@ -22017,9 +22658,12 @@ function exportTheme(theme) {
             ...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 = React.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), 
@@ -22185,8 +22829,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
@@ -22201,55 +22845,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]) => {
@@ -22273,23 +22918,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);
     }
 }
@@ -22629,7 +23274,7 @@ function mergePartStyles(base, override) {
     // No slot provided, use fallback
     if (!slot) return fallback;
     // Slot is a plain React node
-        if (React__default.default.isValidElement(slot) || "string" == typeof slot || "number" == typeof slot) return slot;
+        if ( React__default.default.isValidElement(slot) || "string" == typeof slot || "number" == typeof slot) return slot;
     // Slot is an object with rendering options
         if ("object" == typeof slot && null !== slot) {
         const slotObj = slot;
@@ -22717,11 +23362,11 @@ exports.Card = Card, exports.Chart = Chart, exports.ChartRenderer = ChartRendere
 exports.Checkbox = Checkbox, exports.ColorModeToggle = ColorModeToggle, exports.Container = Container, 
 exports.Countdown = Countdown, exports.DATA_TABLE_CLASSES = DATA_TABLE_CLASSES, 
 exports.DATA_TABLE_SELECTORS = DATA_TABLE_SELECTORS, exports.DATEPICKER = DATEPICKER, 
-exports.DOTS = "...", exports.DROPDOWN = DROPDOWN, exports.DROPDOWN_CSS_VARS = DROPDOWN_CSS_VARS, 
-exports.DataTable = DataTable, exports.DatePicker = DatePicker, exports.DonutChart = DonutChart, 
-exports.Dropdown = Dropdown, exports.EDGE_PANEL = EDGE_PANEL, exports.EdgePanel = EdgePanel, 
-exports.ElevationCard = ElevationCard, exports.FOOTER = FOOTER, exports.FORM = FORM, 
-exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, exports.FooterLink = FooterLink, 
+exports.DEFAULT_ATOMIX_FONTS = DEFAULT_ATOMIX_FONTS, exports.DOTS = "...", exports.DROPDOWN = DROPDOWN, 
+exports.DROPDOWN_CSS_VARS = DROPDOWN_CSS_VARS, exports.DataTable = DataTable, exports.DatePicker = DatePicker, 
+exports.DonutChart = DonutChart, exports.Dropdown = Dropdown, exports.EDGE_PANEL = EDGE_PANEL, 
+exports.EdgePanel = EdgePanel, exports.ElevationCard = ElevationCard, exports.FOOTER = FOOTER, 
+exports.FORM = FORM, exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, exports.FooterLink = FooterLink, 
 exports.FooterSection = FooterSection, exports.FooterSocialLink = FooterSocialLink, 
 exports.Form = Form, exports.FormGroup = FormGroup, exports.FunnelChart = FunnelChart, 
 exports.GLASS_CONTAINER = GLASS_CONTAINER, exports.GaugeChart = GaugeChart, exports.Grid = Grid, 
@@ -22763,8 +23408,9 @@ exports.applyCSSVarsToStyle =
  * Utility to apply CSS variables to style object
  */
 function(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
     };
@@ -22791,10 +23437,11 @@ function(cssVars, baseStyle) {
  * const config = loadAtomixConfig();
  * const theme = createThemeFromConfig(config);
  * ```
- */ , exports.applyTheme = applyTheme, exports.composables = composables, exports.constants = constants, 
-exports.createCLI = createCLI, exports.createCSSVarStyle = createCSSVarStyle, exports.createDarkVariant = createDarkVariant, 
-exports.createDebugAttrs = createDebugAttrs, exports.createPartProps = createPartProps, 
-exports.createSlotComponent = 
+ */ , exports.applyPartStyles = applyPartStyles, exports.applyTheme = applyTheme, 
+exports.composables = composables, exports.constants = constants, exports.createCLI = createCLI, 
+exports.createCSSVarStyle = createCSSVarStyle, exports.createDarkVariant = createDarkVariant, 
+exports.createDebugAttrs = createDebugAttrs, exports.createFontPreloadLink = createFontPreloadLink, 
+exports.createPartProps = createPartProps, exports.createSlotComponent = 
 /**
  * Create a slot wrapper component
  *
@@ -22892,7 +23539,8 @@ function(config) {
 }, exports.exportTheme = exportTheme, exports.extendTheme = extendTheme, exports.extractComponentName = extractComponentName, 
 exports.extractYouTubeId = extractYouTubeId, exports.generateCSSVariableName = generateCSSVariableName, 
 exports.generateCSSVariables = generateCSSVariables, exports.generateComponentCSSVars = generateComponentCSSVars, 
-exports.generateUUID = generateUUID, exports.getCSSVariable = getCSSVariable, exports.getComponentCSSVars = 
+exports.generateFontPreloadTags = generateFontPreloadTags, exports.generateUUID = generateUUID, 
+exports.getCSSVariable = getCSSVariable, exports.getComponentCSSVars = 
 /**
  * Get CSS variables for a component
  */
@@ -22951,34 +23599,66 @@ exports.loadAtomixConfig = function(options = {}) {
  * 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.
  */ , exports.mapSCSSTokensToCSSVars = mapSCSSTokensToCSSVars, exports.mergeCSSVars = mergeCSSVars, 
-exports.mergeComponentProps = mergeComponentProps, exports.mergePartStyles = mergePartStyles, 
-exports.mergeSlots = function(...slots) {
+exports.mergeClassNames = mergeClassNames, exports.mergeComponentProps = mergeComponentProps, 
+exports.mergePartStyles = mergePartStyles, exports.mergeSlots = function(...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
     })));
-}, exports.mergeTheme = mergeTheme, exports.quickTheme = quickTheme, exports.removeCSSVariables = removeCSSVariables, 
-exports.removeTheme = removeTheme, exports.renderSlot = renderSlot, exports.resolveConfigPath = function() {
-    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;
+}, exports.mergeTheme = mergeTheme, exports.preloadFonts = preloadFonts, exports.quickTheme = quickTheme, 
+exports.removeCSSVariables = removeCSSVariables, exports.removeTheme = removeTheme, 
+exports.renderSlot = renderSlot, exports.resolveConfigPath = function() {
+    // 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;
 }, exports.runCLI = runCLI, exports.sliderConstants = sliderConstants, exports.supportsDarkMode = function(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"));
 }, exports.theme = theme, exports.themeToCSS = themeToCSS, exports.types = types, 
 exports.useAccordion = useAccordion, exports.useAtomixGlass = useAtomixGlass, exports.useBadge = useBadge, 
 exports.useBarChart = useBarChart, exports.useBlock = useBlock, exports.useBreadcrumb = useBreadcrumb, 
 exports.useButton = useButton, exports.useCard = useCard, exports.useChartData = useChartData, 
 exports.useChartInteraction = useChartInteraction, exports.useChartScale = useChartScale, 
 exports.useCheckbox = useCheckbox, exports.useComponentCustomization = 
-/**
- * Component Customization Hook
- *
- * Merges theme-level component overrides with component-level props
- * for comprehensive customization support.
- */
 /**
  * Hook to merge theme overrides with component props
  *
@@ -23004,8 +23684,11 @@ function(component, props) {
         })), merged;
     }), [ theme, component, props.parts ]), className = React.useMemo((() => [ theme?.components?.[component]?.className || "", props.className || "" ].filter(Boolean).join(" ")), [ theme, component, props.className ]), style = React.useMemo((() => ({
         ...props.style
-    })), [ props.style ]), cssVarStyle = React.useMemo((() => Object.entries(cssVars).reduce(((acc, [key, value]) => (acc[key] = "number" == typeof value ? `${value}px` : value, 
-    acc)), {})), [ cssVars ]);
+    })), [ props.style ]), cssVarStyle = React.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,