@shohojdhara/atomix 0.3.13 → 0.3.15

package/dist/index.esm.js

@@ -50,7 +50,7 @@ import { createPortal } from "react-dom";
     CLOSE_BTN_CLASS: "c-callout__close-btn",
     VARIANT_PREFIX: "c-callout--",
     CLASSES: {
-        ONELINE: "c-callout--oneline",
+        COMPACT: "c-callout--compact",
         TOAST: "c-callout--toast",
         HIDE: "is-hide"
     }
@@ -1226,29 +1226,6 @@ import { createPortal } from "react-dom";
         SIZES: [ "xs", "sm", "md", "lg", "xl", "none" ],
         DEFAULT: "md"
     }
-}, GLASS_CONTAINER = {
-    CLASSES: {
-        BASE: "c-glass-container",
-        GLASS: "c-glass-container__glass",
-        WARP: "c-glass-container__warp",
-        CONTENT: "c-glass-container__content",
-        OVERLAY: "c-glass-container__overlay",
-        OVERLAY_VISIBLE: "c-glass-container__overlay--visible",
-        OVERLAY_HIDDEN: "c-glass-container__overlay--hidden",
-        OVERLAY_BLEND: "c-glass-container__overlay-blend",
-        BORDER: "c-glass-container__border",
-        BORDER_OVERLAY: "c-glass-container__border-overlay",
-        HOVER_EFFECT: "c-glass-container__hover-effect",
-        ACTIVE_EFFECT: "c-glass-container__active-effect",
-        INTERACTION_EFFECT: "c-glass-container__interaction-effect",
-        ACTIVE: "c-glass-container--active",
-        CLICKABLE: "c-glass-container--clickable"
-    },
-    DISPLACEMENT_MAPS: {
-        STANDARD: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZGllbnQpIi8+PC9zdmc+",
-        POLAR: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icG9sYXIiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODA4MDgwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwb2xhcikiLz48L3N2Zz4=",
-        PROMINENT: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icHJvbWluZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMGMwYzAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3Byb21pbmVudCkiLz48L3N2Zz4="
-    }
 }, FOOTER = {
     SELECTORS: {
         FOOTER: ".c-footer",
@@ -1387,10 +1364,16 @@ import { createPortal } from "react-dom";
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
+        // Note: This default must match the SCSS variable --atomix-radius-md
+        // @see src/styles/01-settings/_settings.global.scss
         DEFAULT_CORNER_RADIUS: 16,
-        // Fallback value matching design system
         MAX_SIZE: 4096,
         // Maximum width/height for glass size
+        // Palette for internal calculations (matches design system base colors)
+        PALETTE: {
+            WHITE: "255, 255, 255",
+            BLACK: "0, 0, 0"
+        },
         // Gradient calculation constants
         GRADIENT: {
             BASE_ANGLE: 135,
@@ -1581,7 +1564,12 @@ function useAccordion(initialProps) {
             panelHeight: panelHeight
         },
         toggle: () => {
-            defaultProps.disabled || (isControlled ? defaultProps.onOpenChange && defaultProps.onOpenChange(!isOpen) : setInternalOpen((prev => !prev)));
+            if (!defaultProps.disabled) {
+                const nextOpen = !isOpen;
+                isControlled || setInternalOpen(nextOpen), defaultProps.onOpenChange?.(nextOpen), 
+                // Call legacy handlers
+                nextOpen ? defaultProps.onOpen?.() : defaultProps.onClose?.();
+            }
         },
         updatePanelHeight: updatePanelHeight,
         panelRef: panelRef,
@@ -1603,10 +1591,10 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
     y: 0
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
-    // More responsive calculation for overlight effects
+    // Bounded calculation — keeps the glass effect subtle and stable
         const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$1.MOUSE_INFLUENCE_DIVISOR;
-    return Math.min(1.5, influence);
- // Cap influence for better control
+    return Math.min(.8, influence);
+ // Tighter cap to prevent blur/filter blow-out
 }, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$1.MIN_BLUR : Math.max(CONSTANTS$1.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE, parseBorderRadiusValue = value => {
     if ("number" == typeof value) return Math.max(0, value);
     if ("string" != typeof value || !value.trim()) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
@@ -1837,7 +1825,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, globalMousePosition: globalMousePosition = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, active: active = !1, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, cornerRadius: cornerRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, cornerRadius: cornerRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
 }, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
@@ -1950,28 +1938,29 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             flowBlur: 1.2 * blurAmount
         };
         // Enhanced validation for liquid blur
-                if (!enableLiquidBlur || !rectCache || !globalMousePosition || "number" != typeof globalMousePosition.x || "number" != typeof globalMousePosition.y || isNaN(globalMousePosition.x) || isNaN(globalMousePosition.y)) return defaultBlur;
+                if (!enableLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
         try {
-            // Cache center and distance calculations
-            const center = calculateElementCenter(rectCache), distance = calculateDistance(globalMousePosition, center), maxDistance = Math.sqrt(rectCache.width * rectCache.width + rectCache.height * rectCache.height) / 2, normalizedDistance = Math.min(distance / maxDistance, 1), mouseInfluence = calculateMouseInfluence(mouseOffset), baseBlur = blurAmount + mouseInfluence * blurAmount * .4, edgeBlur = baseBlur * (.8 + .6 * (1.5 * normalizedDistance + .3 * mouseInfluence)), centerBlur = baseBlur * (.3 + .4 * (.3 * (1 - normalizedDistance) + .2 * mouseInfluence)), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, flowDirection = Math.atan2(deltaY, deltaX), flowBlur = baseBlur * (.4 + .6 * (.5 * Math.sin(flowDirection + mouseInfluence * Math.PI) + .5)), stateMultiplier = (isHovered ? 1.2 : 1) * (isActive ? 1.4 : 1);
+            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = 2 * blurAmount, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * .15), edgeIntensity = .15 * mouseInfluence, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = .1 * mouseInfluence, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, 1.2 * baseBlur);
+            // NOTE: hover/active multipliers intentionally omitted here —
+            // they belong on opacity layers, not the blur filter itself.
             return {
-                baseBlur: clampBlur(baseBlur * stateMultiplier),
-                edgeBlur: clampBlur(edgeBlur * stateMultiplier),
-                centerBlur: clampBlur(centerBlur * stateMultiplier),
-                flowBlur: clampBlur(flowBlur * stateMultiplier)
+                baseBlur: clampBlur(baseBlur),
+                edgeBlur: clampBlur(edgeBlur),
+                centerBlur: clampBlur(centerBlur),
+                flowBlur: clampBlur(flowBlur)
             };
         } catch (error) {
             return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
             defaultBlur;
         }
-    }), [ enableLiquidBlur, blurAmount, globalMousePosition, mouseOffset, isHovered, isActive, rectCache, style, glassSize ]), backdropStyle = useMemo((() => {
+    }), [ enableLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
         try {
             const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), validatedBaseBlur = "number" != typeof liquidBlur.baseBlur || isNaN(liquidBlur.baseBlur) ? 0 : liquidBlur.baseBlur, validatedEdgeBlur = "number" != typeof liquidBlur.edgeBlur || isNaN(liquidBlur.edgeBlur) ? 0 : liquidBlur.edgeBlur, validatedCenterBlur = "number" != typeof liquidBlur.centerBlur || isNaN(liquidBlur.centerBlur) ? 0 : liquidBlur.centerBlur, validatedFlowBlur = "number" != typeof liquidBlur.flowBlur || isNaN(liquidBlur.flowBlur) ? 0 : liquidBlur.flowBlur, area = rectCache ? rectCache.width * rectCache.height : 0;
             // Validate blur values before using them
                         return !enableLiquidBlur || effectiveReducedMotion || effectiveDisableEffects || area > 18e4 ? {
-                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`
+                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
             } : {
-                backdropFilter: `${[ `blur(${validatedBaseBlur}px)`, `blur(${validatedEdgeBlur}px)`, `blur(${validatedCenterBlur}px)`, `blur(${validatedFlowBlur}px)` ].join(" ")} saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`
+                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
             };
             // Single-pass fallback: stronger radius to match perceived blur of multi-pass
                 } catch (error) {
@@ -1990,7 +1979,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-padding": padding || "0 0",
                 "--atomix-glass-container-radius": `${"number" != typeof cornerRadius || isNaN(cornerRadius) ? 0 : cornerRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
-                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${.4 + .002 * mx})`, `inset 0 -1px 0 rgba(0, 0, 0, ${.2 + .001 * Math.abs(my)})`, `inset 0 0 20px rgba(0, 0, 0, ${.08 + .001 * Math.abs(mx + my)})`, `0 2px 12px rgba(0, 0, 0, ${.12 + .002 * Math.abs(my)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
+                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
                 "--atomix-glass-container-shadow-opacity": effectiveDisableEffects ? 0 : 1,
                 // Background and shadow values use design token-aligned RGB values
                 "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
@@ -2009,10 +1998,18 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]);
+    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]), setForceNoTransition = el => {
+        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
+        el.style.setProperty("transition-delay", "0s", "important"));
+    };
     return jsx("div", {
-        ref: ref,
-        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${active ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
+        ref: el => {
+            // Apply force no-transition
+            setForceNoTransition(el), 
+            // Handle forwarded ref
+            "function" == typeof ref ? ref(el) : ref && (ref.current = el);
+        },
+        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
         style: {
             ...style,
             ...containerVars
@@ -2030,6 +2027,11 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             onMouseUp: onMouseUp,
             children: [ jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
+                style: {
+                    zIndex: 1,
+                    position: "absolute",
+                    inset: 0
+                },
                 children: [ jsx(GlassFilter, {
                     blurAmount: blurAmount,
                     mode: mode,
@@ -2038,6 +2040,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
+                    ref: setForceNoTransition,
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`,
@@ -2059,9 +2062,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 style: {
                     position: "relative",
                     textShadow: "var(--atomix-glass-container-text-shadow)",
-                    ...elasticity > 0 ? {
-                        zIndex: 100
-                    } : {}
+                    // Ensure content is always above the filter layer (zIndex 1)
+                    zIndex: elasticity > 0 ? 100 : 2
                 },
                 children: children
             }) ]
@@ -2179,12 +2181,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [internalMouseOffset, setInternalMouseOffset] = useState({
         x: 0,
         y: 0
-    }), [dynamicCornerRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveCornerRadius = useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius, debugCornerRadius ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
+    }), [dynamicCornerRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveCornerRadius = useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
             try {
-                let extractedRadius = null, extractionSource = "default";
+                let extractedRadius = null;
                 if (contentRef.current) {
                     const firstChild = contentRef.current.firstElementChild;
                     if (firstChild) {
@@ -2201,15 +2203,14 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                                 return null;
                             }
                         })(firstChild);
-                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius, extractionSource = "DOM element");
+                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius);
                     }
                 }
                 if (null === extractedRadius) {
                     const childRadius = extractBorderRadiusFromChildren(children);
-                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius, 
-                    extractionSource = "React children");
+                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius);
                 }
-                null !== extractedRadius && extractedRadius > 0 ? setDynamicCornerRadius(extractedRadius) : "undefined" == typeof process || process.env;
+                null !== extractedRadius && extractedRadius > 0 && setDynamicCornerRadius(extractedRadius);
             } catch (error) {
                 "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugCornerRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
             }
@@ -2338,7 +2339,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         }
         if ("boolean" == typeof overLight && 
         // For boolean values, disable auto-detection
-        // Cache is automatically managed by WeakMap (no manual clearing needed)
         setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
             const mediaQueryReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"), mediaQueryHighContrast = window.matchMedia("(prefers-contrast: high)");
             setUserPrefersReducedMotion(mediaQueryReducedMotion.matches), setUserPrefersHighContrast(mediaQueryHighContrast.matches);
@@ -2408,6 +2408,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
     // Transform calculations
     const calculateDirectionalScale = useCallback((() => {
+        if (!0 === overLight || "auto" === overLight && detectedOverLight || "object" == typeof overLight && null !== overLight && detectedOverLight) return "scale(1)";
         if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return "scale(1)";
         const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
             x: edgeDistanceX,
@@ -2421,7 +2422,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         if (0 === centerDistance) return "scale(1)";
         const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15;
         return `scaleX(${Math.max(.8, scaleX)}) scaleY(${Math.max(.8, scaleY)})`;
-    }), [ globalMousePosition, elasticity, glassSize, glassRef ]), calculateFadeInFactor = useCallback((() => {
+    }), [ globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight ]), calculateFadeInFactor = useCallback((() => {
         if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return 0;
         const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
             x: edgeDistanceX,
@@ -2506,20 +2507,21 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             isOverLight: isOverLight,
             threshold: .7,
             opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: Math.min(1.8, Math.max(1, 1.4 + .3 * mouseInfluence)),
-            brightness: Math.min(1.2, Math.max(.7, .85 + .15 * mouseInfluence)),
-            saturationBoost: Math.min(2, Math.max(1, 1.3 + .4 * mouseInfluence)),
-            shadowIntensity: Math.min(1.5, Math.max(.5, .9 + .5 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, .7 + .3 * mouseInfluence))
+            contrast: Math.min(1.6, Math.max(1, 1.4 + .1 * mouseInfluence)),
+            brightness: Math.min(1.1, Math.max(.8, .9 + .05 * mouseInfluence)),
+            saturationBoost: 1.3,
+            // Fixed value — dynamic saturation amplifies perceived displacement
+            shadowIntensity: Math.min(1.2, Math.max(.5, .9 + .2 * mouseInfluence)),
+            borderOpacity: Math.min(1, Math.max(.3, .7 + .1 * mouseInfluence))
         };
         if ("object" == typeof overLight && null !== overLight) {
             const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), finalConfig = {
                 ...baseConfig,
                 threshold: validatedThreshold,
                 opacity: validatedOpacity * hoverIntensity * activeIntensity,
-                contrast: validatedContrast + .3 * mouseInfluence,
-                brightness: validatedBrightness + .15 * mouseInfluence,
-                saturationBoost: validatedSaturationBoost + .4 * mouseInfluence
+                contrast: Math.min(1.6, validatedContrast + .1 * mouseInfluence),
+                brightness: Math.min(1.1, validatedBrightness + .05 * mouseInfluence),
+                saturationBoost: validatedSaturationBoost
             };
             // Validate and apply object config values with proper clamping
                         return "undefined" == typeof process || process.env, finalConfig;
@@ -2653,19 +2655,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         debugOverLight: debugOverLight,
         enablePerformanceMonitoring: enablePerformanceMonitoring,
         children: children
-    }), isOverLight = overLightConfig.isOverLight, shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
+    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
         ...style,
-        ...0 !== elasticity && !effectiveDisableEffects && {
+        ...!effectiveDisableEffects && {
             transform: transformStyle
         }
-    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = {
+    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
         position: style.position || "absolute",
         top: style.top || 0,
         left: style.left || 0
-    }, adjustedSize = {
+    })), [ style.position, style.top, style.left ]), adjustedSize = useMemo((() => ({
         width: "fixed" !== style.position ? "100%" : style.width ? style.width : Math.max(glassSize.width, 0),
         height: "fixed" !== style.position ? "100%" : style.height ? style.height : Math.max(glassSize.height, 0)
-    }, gradientValues = useMemo((() => {
+    })), [ style.position, style.width, style.height, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
         return {
             borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
@@ -2705,7 +2707,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
         };
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
-        const whiteColor = "255, 255, 255", {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
+        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
         return {
             "--atomix-glass-radius": `${effectiveCornerRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
@@ -2716,20 +2718,20 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
             "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
             "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
-            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[0]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[1]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[2]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[3]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
             "--atomix-glass-hover-1-opacity": opacityValues.hover1,
-            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
             "--atomix-glass-hover-2-opacity": opacityValues.hover2,
-            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
             "--atomix-glass-hover-3-opacity": opacityValues.hover3,
-            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
             "--atomix-glass-base-opacity": opacityValues.base,
-            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
             "--atomix-glass-overlay-opacity": opacityValues.over,
-            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
         };
-    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsx("div", {
         className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
         style: {
             ...positionStyles,
@@ -2755,9 +2757,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             className: className,
             style: baseStyle,
             cornerRadius: effectiveCornerRadius,
-            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : overLightConfig.isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
+            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
             blurAmount: effectiveDisableEffects ? 0 : blurAmount,
-            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : overLightConfig.isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
+            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
             aberrationIntensity: effectiveDisableEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
             glassSize: glassSize,
             padding: padding,
@@ -2773,10 +2775,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             onMouseLeave: handleMouseLeave,
             onMouseDown: handleMouseDown,
             onMouseUp: handleMouseUp,
-            active: isActive,
             isHovered: isHovered,
             isActive: isActive,
-            overLight: overLightConfig.isOverLight,
+            overLight: isOverLight,
+            overLightConfig: {
+                contrast: overLightConfig.contrast,
+                brightness: overLightConfig.brightness,
+                shadowIntensity: overLightConfig.shadowIntensity,
+                borderOpacity: overLightConfig.borderOpacity
+            },
             onClick: onClick,
             mode: mode,
             transform: baseStyle.transform,
@@ -2816,14 +2823,16 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     });
 }
 
-const Accordion =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
+const Accordion =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, onOpen: onOpen, onClose: onClose, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
     // Generate unique IDs for accessibility
     const instanceId = useId(), buttonId = `accordion-header-${instanceId}`, panelId = `accordion-panel-${instanceId}`, {state: state, toggle: toggle, updatePanelHeight: updatePanelHeight, panelRef: panelRef, contentRef: contentRef, generateClassNames: generateClassNames, generateHeaderClassNames: generateHeaderClassNames} = useAccordion({
         defaultOpen: defaultOpen,
         disabled: disabled,
         iconPosition: iconPosition,
         isOpen: controlledOpen,
-        onOpenChange: onOpenChange
+        onOpenChange: onOpenChange,
+        onOpen: onOpen,
+        onClose: onClose
     }), defaultIcon = jsx("i", {
         className: "c-accordion__icon",
         "aria-hidden": "true",
@@ -3112,7 +3121,11 @@ const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "cur
         // Add input validation
         "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
         return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
-    }
+    },
+    // Aliases for compatibility
+    plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
+    waves: (uv, mousePosition) => fragmentShaders.liquidMetal(uv, mousePosition),
+    noise: (uv, mousePosition) => fragmentShaders.appleFluid(uv, mousePosition)
 }, shaderUtils =  Object.freeze( Object.defineProperty({
     __proto__: null,
     ShaderDisplacementGenerator: class {
@@ -3302,7 +3315,7 @@ function useBadge(initialProps) {
 
 AvatarGroup.displayName = "AvatarGroup";
 
-const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, className: className = "", glass: glass, style: style}) => {
+const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, onRemove: onRemove, "aria-label": ariaLabel, className: className = "", glass: glass, style: style}) => {
     const {generateBadgeClass: generateBadgeClass} = useBadge({
         variant: variant,
         size: size,
@@ -3315,6 +3328,7 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
     }), badgeElement = jsxs("span", {
         className: badgeClass,
         "aria-disabled": disabled,
+        "aria-label": ariaLabel,
         ref: ref,
         style: style,
         children: [ icon && jsx("span", {
@@ -3322,6 +3336,13 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
             children: icon
         }), jsx("span", {
             children: label
+        }), onRemove && jsx("button", {
+            type: "button",
+            className: "c-badge__close",
+            onClick: onRemove,
+            "aria-label": "Remove badge",
+            disabled: disabled,
+            children: "×"
         }) ]
     });
     if (glass) {
@@ -3449,7 +3470,7 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", ariaLabel: ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
     return jsx("nav", {
         "aria-label": ariaLabel,
@@ -3484,46 +3505,12 @@ const Breadcrumb =  memo((({items: items, divider: divider, className: className
     });
 }));
 
-/**
- * Button state and functionality
- * @param initialProps - Initial button properties
- * @returns Button state and methods
- */
-function useButton(initialProps) {
-    // Default button properties
-    const defaultProps = {
-        variant: "primary",
-        size: "md",
-        disabled: !1,
-        rounded: !1,
-        loading: !1,
-        fullWidth: !1,
-        block: !1,
-        active: !1,
-        selected: !1,
-        ...initialProps
-    };
-    /**
-   * Generate button class based on properties
-   * @param props - Button properties
-   * @returns Class string
-   */    return {
-        defaultProps: defaultProps,
-        generateButtonClass: props => {
-            const {variant: variant = defaultProps.variant, size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, rounded: rounded = defaultProps.rounded, iconOnly: iconOnly = !1, glass: glass = defaultProps.glass, loading: loading = defaultProps.loading, fullWidth: fullWidth = defaultProps.fullWidth, block: block = defaultProps.block, active: active = defaultProps.active, selected: selected = defaultProps.selected, className: className = ""} = props, sizeClass = "md" === size ? "" : `c-btn--${size}`, iconOnlyClass = iconOnly ? "c-btn--icon" : "", roundedClass = rounded ? "c-btn--rounded" : "", disabledClass = disabled ? "c-btn--disabled" : "", glassClass = glass ? "c-btn--glass" : "", loadingClass = loading ? BUTTON.CLASSES.LOADING : "", fullWidthClass = fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", blockClass = block ? BUTTON.CLASSES.BLOCK : "", activeClass = active ? BUTTON.CLASSES.ACTIVE : "", selectedClass = selected ? BUTTON.CLASSES.SELECTED : "";
-            return [ BUTTON.BASE_CLASS, `c-btn--${variant}`, sizeClass, iconOnlyClass, roundedClass, disabledClass, glassClass, loadingClass, fullWidthClass, blockClass, activeClass, selectedClass, className ].filter(Boolean).join(" ");
-        },
-        handleClick: handler => event => {
-            defaultProps.disabled || defaultProps.loading || !handler || handler(event);
-        }
-    };
-}
-
 /**
  * Spinner state and functionality
  * @param initialProps - Initial spinner properties
  * @returns Spinner state and methods
- */ function useSpinner(initialProps) {
+ */
+function useSpinner(initialProps) {
     // Default spinner properties
     const defaultProps = {
         variant: "primary",
@@ -3546,7 +3533,7 @@ function useButton(initialProps) {
 
 Breadcrumb.displayName = "Breadcrumb";
 
-const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass}) => {
+const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status"}) => {
     const {generateSpinnerClass: generateSpinnerClass} = useSpinner({
         size: size,
         variant: variant,
@@ -3559,10 +3546,11 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
     }), spinnerContent = jsx("div", {
         className: spinnerClass,
         style: style,
-        role: "status",
+        role: role,
+        "aria-label": ariaLabel || "Loading",
         children: jsx("span", {
             className: SPINNER.VISUALLY_HIDDEN,
-            children: "Loading..."
+            children: ariaLabel || "Loading..."
         })
     });
     if (glass) {
@@ -3614,7 +3602,7 @@ class ThemeNaming {
    * Convert kebab-case to camelCase for JavaScript properties
    * @param str - String to convert
    */    static kebabToCamel(str) {
-        return str.replace(/-([a-z])/g, (g => g[1].toUpperCase()));
+        return str.replace(/-([a-z])/g, (g => g[1]?.toUpperCase() ?? ""));
     }
     /**
    * Create a CSS variable name
@@ -3675,25 +3663,11 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
-    }) : icon;
-    // Determine if we should render as a link
-        useButton({
-        variant: variant,
-        size: size,
-        disabled: isDisabled,
-        rounded: rounded,
-        glass: glass,
-        loading: loading,
-        fullWidth: fullWidth,
-        block: block,
-        active: active,
-        selected: selected
-    });
-    const buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
+    }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
         isDisabled ? event.preventDefault() : onClick?.(event);
     }), [ isDisabled, onClick ]), handleMouseEnter = useCallback((event => {
         isDisabled || onHover?.(event);
@@ -3701,7 +3675,7 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         isDisabled || onFocus?.(event);
     }), [ isDisabled, onFocus ]), handleBlurEvent = useCallback((event => {
         isDisabled || onBlur?.(event);
-    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", buttonContent = jsxs(Fragment, {
+    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", safeAriaLabel = ariaLabel || (iconOnly ? "string" == typeof label ? label : "string" == typeof children ? children : void 0 : void 0), buttonContent = jsxs(Fragment, {
         children: [ loading && jsx("span", {
             className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT),
             "aria-hidden": "true",
@@ -3718,80 +3692,77 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
             children: buttonText
         }) ]
     }), buttonProps = {
-        ref: ref,
         className: buttonClass,
-        type: "button" !== Component || shouldRenderAsLink ? void 0 : type,
         onClick: handleClickEvent,
         onMouseEnter: onHover ? handleMouseEnter : void 0,
         onFocus: onFocus ? handleFocusEvent : void 0,
         onBlur: onBlur ? handleBlurEvent : void 0,
-        disabled: isDisabled && "button" === Component && !shouldRenderAsLink,
         "aria-disabled": isDisabled,
         "aria-busy": loading,
-        "aria-label": ariaLabel || (iconOnly ? label || children : void 0),
+        "aria-label": safeAriaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-expanded": ariaExpanded,
         "aria-controls": ariaControls,
         tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
         style: style,
         ...props
-    }, defaultGlassProps = {
-        displacementScale: 20,
-        blurAmount: 0,
-        saturation: 200,
-        elasticity: 0
-    }, glassProps = !0 === glass ? defaultGlassProps : {
-        ...defaultGlassProps,
-        ...glass
     };
-    // Handle click with loading check
-        // Render as anchor if href is provided
-    if (shouldRenderAsLink) {
-        const {ref: _, ...buttonPropsWithoutRef} = buttonProps, anchorButtonProps = {
-            ...buttonPropsWithoutRef,
-            type: void 0,
-            disabled: void 0
-        };
-        // Use custom LinkComponent if provided (e.g., Next.js Link)
-        if (LinkComponent) {
-            const LinkComp = LinkComponent, linkProps = {
-                ...anchorButtonProps,
-                ref: ref,
-                href: href,
-                target: target,
-                rel: "_blank" === target ? "noopener noreferrer" : void 0
-            }, linkElement = jsx(LinkComp, {
-                ...linkProps,
-                children: buttonContent
-            });
-            return glass ? jsx(AtomixGlass, {
-                ...glassProps,
-                children: linkElement
-            }) : linkElement;
-        }
-        // Fallback to regular anchor tag
-                const anchorElement = jsx("a", {
-            ...anchorButtonProps,
+    // Determine if we should render as a link
+    // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
+    // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
+    // This is a safe fallback for disabled links.
+        let content;
+    // Render as anchor if href is provided
+        if (shouldRenderAsLink) 
+    // Use custom LinkComponent if provided (e.g., Next.js Link)
+    if (LinkComponent) {
+        const LinkComp = LinkComponent, linkProps = {
+            ...buttonProps,
             ref: ref,
+            // LinkComponent usually forwards ref to anchor
             href: href,
             target: target,
-            rel: "_blank" === target ? "noopener noreferrer" : void 0,
+            rel: "_blank" === target ? "noopener noreferrer" : void 0
+        };
+        content = jsx(LinkComp, {
+            ...linkProps,
             children: buttonContent
         });
-        return glass ? jsx(AtomixGlass, {
-            ...glassProps,
-            children: anchorElement
-        }) : anchorElement;
-    }
+    } else 
+    // Fallback to regular anchor tag
+    content = jsx("a", {
+        ...buttonProps,
+        ref: ref,
+        href: href,
+        target: target,
+        rel: "_blank" === target ? "noopener noreferrer" : void 0,
+        children: buttonContent
+    }); else 
     // Default button rendering
-        const buttonElement = jsx(Component, {
+    content = jsx(Component, {
         ...buttonProps,
+        ref: ref,
+        type: "button" === Component ? type : void 0,
+        disabled: isDisabled,
         children: buttonContent
     });
-    return glass ? jsx(AtomixGlass, {
-        ...glassProps,
-        children: buttonElement
-    }) : buttonElement;
+    if (glass) {
+        // Default glass props
+        const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 0,
+            saturation: 200,
+            elasticity: 0
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: content
+        });
+    }
+    return content;
 })));
 
 Button.displayName = "Button";
@@ -4201,7 +4172,7 @@ var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeO
 const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     var own = it.includes;
     return it === ArrayPrototype$1 || isPrototypeOf$1(ArrayPrototype$1, it) && own === ArrayPrototype$1.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf$1(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
-})), Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, oneLine: oneLine = !1, toast: toast = !1, glass: glass, className: className, style: style, ...props}) => {
+})), Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, compact: compact = !1, isToast: isToast = !1, glass: glass, className: className, style: style, ...props}) => {
     const {generateCalloutClass: generateCalloutClass, handleClose: handleClose} = 
     /**
  * Callout state and functionality
@@ -4212,8 +4183,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         // Default callout properties
         const defaultProps = {
             variant: "primary",
-            oneLine: !1,
-            toast: !1,
+            compact: !1,
+            isToast: !1,
             glass: !1,
             ...initialProps
         };
@@ -4224,8 +4195,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
    */        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;
-                return `c-callout ${variant ? `c-callout--${variant}` : ""} ${oneLine ? "c-callout--oneline" : ""} ${toast ? "c-callout--toast" : ""} ${glass ? "c-callout--glass" : ""} ${className}`.trim();
+                const {variant: variant = defaultProps.variant, compact: compact = defaultProps.compact, isToast: isToast = defaultProps.isToast, glass: glass = defaultProps.glass, className: className = ""} = props;
+                return `c-callout ${variant ? `c-callout--${variant}` : ""} ${compact ? "c-callout--compact" : ""} ${isToast ? "c-callout--toast" : ""} ${glass ? "c-callout--glass" : ""} ${className}`.trim();
             },
             handleClose: handler => () => {
                 handler && handler();
@@ -4236,8 +4207,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
  * Callout component for displaying important messages, notifications, or alerts
  */ ({
         variant: variant,
-        oneLine: oneLine,
-        toast: toast,
+        compact: compact,
+        isToast: isToast,
         glass: glass,
         className: className,
         style: style
@@ -4247,7 +4218,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
             role: "region"
         };
         // For toast notifications or alerts, use appropriate role and live region
-                return toast ? (baseAttributes.role = "alert", baseAttributes["aria-live"] = "polite") : _includesInstanceProperty(_context = [ "warning", "error" ]).call(_context, variant) ? (baseAttributes.role = "alert", 
+                return isToast ? (baseAttributes.role = "alert", baseAttributes["aria-live"] = "polite") : _includesInstanceProperty(_context = [ "warning", "error" ]).call(_context, variant) ? (baseAttributes.role = "alert", 
         baseAttributes["aria-live"] = "assertive") : _includesInstanceProperty(_context2 = [ "info", "success" ]).call(_context2, variant) && (baseAttributes.role = "status", 
         baseAttributes["aria-live"] = "polite"), baseAttributes;
     }, calloutContent = jsxs(Fragment, {
@@ -4293,8 +4264,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         return jsx("div", {
             className: generateCalloutClass({
                 variant: variant,
-                oneLine: oneLine,
-                toast: toast,
+                compact: compact,
+                isToast: isToast,
                 glass: glass,
                 className: className
             }),
@@ -4316,8 +4287,8 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
     return jsx("div", {
         className: generateCalloutClass({
             variant: variant,
-            oneLine: oneLine,
-            toast: toast,
+            compact: compact,
+            isToast: isToast,
             glass: glass,
             className: className
         }),
@@ -4344,7 +4315,7 @@ onClick: onClick, onHover: onHover, onFocus: onFocus, href: href, target: target
 // Glass
 glass: glass, 
 // Accessibility
-role: role, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, tabIndex: tabIndex, 
+role: role, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, tabIndex: tabIndex, 
 // Styling
 className: className = "", style: style, ...rest}, ref) => {
     // Determine if card is clickable/interactive
@@ -5885,7 +5856,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         tabIndex: 0,
         ...props,
         children: [ (title || subtitle || showToolbar) && jsxs("div", {
-            className: `${CHART.HEADER_CLASS} u-d-flex u-justify-between u-align-items-start u-gap-4`,
+            className: `${CHART.HEADER_CLASS} u-flex u-justify-between u-items-start u-gap-4`,
             children: [ jsxs("div", {
                 className: `${CHART.HEADER_CONTENT_CLASS} u-flex-1`,
                 children: [ title && jsx("h3", {
@@ -8829,6 +8800,22 @@ const WaterfallChart =  memo( forwardRef((({waterfallData: waterfallData = [], c
     });
 })));
 
+/**
+ * CSV Utility Functions
+ */
+/**
+ * Sanitize cell content to prevent CSV injection
+ *
+ * Replaces newlines and tabs with spaces, escapes double quotes,
+ * and prefixes dangerous characters (=, +, -, @) with a single quote
+ * to prevent formula injection.
+ */
+function sanitizeCSVCell(cell) {
+    const sanitized = String(cell ?? "").replace(/[\r\n\t]/g, " ").replace(/"/g, '""');
+    // Prevent formula injection by prefixing dangerous characters
+        return /^[=+\-@]/.test(sanitized) ? `'${sanitized}` : sanitized;
+}
+
 WaterfallChart.displayName = "WaterfallChart";
 
 const SIZE_MAP = {
@@ -9030,29 +9017,38 @@ function getRowId$1(row, rowKey) {
     } // Reset to first page when filtering
     ), []), clearColumnFilters = useCallback((() => {
         setColumnFilterValues({}), setCurrentPage(1);
-    }), []), filteredData = useMemo((() => {
-        let result = data;
-        // Apply global search
-                if (searchQuery) {
-            const lowercaseQuery = searchQuery.toLowerCase();
-            result = result.filter((row => visibleColumns.some((column => {
+    }), []), activeColumnFilters = useMemo((() => columnFilters ? Object.entries(columnFilterValues).filter((([, value]) => null != value && "" !== value)).map((([columnKey, value]) => {
+        const column = columns.find((col => col.key === columnKey));
+        return column && column.filterable ? {
+            key: columnKey,
+            value: value,
+            lowercaseValue: "string" == typeof value ? value.toLowerCase() : String(value).toLowerCase(),
+            column: column
+        } : null;
+    })).filter((f => null !== f)) : []), [ columnFilters, columnFilterValues, columns ]), filteredData = useMemo((() => {
+        if (!searchQuery && 0 === activeColumnFilters.length) return data;
+        const lowercaseQuery = searchQuery ? searchQuery.toLowerCase() : "";
+        return data.filter((row => {
+            // Apply global search
+            if (searchQuery && !visibleColumns.some((column => {
                 var _context;
                 const value = row[column.key];
                 return null != value && _includesInstanceProperty(_context = String(value).toLowerCase()).call(_context, lowercaseQuery);
-            }))));
-        }
-        // Apply column-specific filters
-                return columnFilters && (result = result.filter((row => Object.entries(columnFilterValues).every((([columnKey, filterValue]) => {
-            var _context2;
-            if (!filterValue) return !0;
-            const column = columns.find((col => col.key === columnKey));
-            if (!column || !column.filterable) return !0;
-            const cellValue = row[columnKey];
-            return null != cellValue && (
-            // Use custom filter function if provided
-            column.filterFunction ? column.filterFunction(cellValue, filterValue) : _includesInstanceProperty(_context2 = String(cellValue).toLowerCase()).call(_context2, filterValue.toLowerCase()));
-        }))))), result;
-    }), [ data, visibleColumns, searchQuery, columnFilterValues, columnFilters, columns ]), sortedData = useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
+            }))) return !1;
+            // Apply column-specific filters
+                        for (let i = 0; i < activeColumnFilters.length; i++) {
+                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = activeColumnFilters[i], cellValue = row[key];
+                if (null == cellValue) return !1;
+                // Use custom filter function if provided
+                                var _context2;
+                // Default text filter
+                                if (column.filterFunction) {
+                    if (!column.filterFunction(cellValue, value)) return !1;
+                } else if (!_includesInstanceProperty(_context2 = String(cellValue).toLowerCase()).call(_context2, lowercaseValue)) return !1;
+            }
+            return !0;
+        }));
+    }), [ data, visibleColumns, searchQuery, activeColumnFilters ]), sortedData = useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
         const aValue = a[sortConfig.key], bValue = b[sortConfig.key];
         return null == aValue ? "asc" === sortConfig.direction ? -1 : 1 : null == bValue ? "asc" === sortConfig.direction ? 1 : -1 : "string" == typeof aValue && "string" == typeof bValue ? "asc" === sortConfig.direction ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue) : "asc" === sortConfig.direction ? aValue > bValue ? 1 : -1 : aValue > bValue ? -1 : 1;
     })) : filteredData), [ filteredData, sortConfig, sortable ]), paginatedData = useMemo((() => {
@@ -9195,7 +9191,7 @@ const DOTS = "...", range = (start, end) => {
             "aria-hidden": "true"
         })
     })
-}))), Pagination =  memo((({currentPage: currentPage = PAGINATION_DEFAULTS.currentPage, totalPages: totalPages = PAGINATION_DEFAULTS.totalPages, onPageChange: onPageChange, siblingCount: siblingCount = PAGINATION_DEFAULTS.siblingCount, showFirstLastButtons: showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons, showPrevNextButtons: showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons, showSearch: showSearch = !1, searchPlaceholder: searchPlaceholder = "Go to page", size: size = PAGINATION_DEFAULTS.size, className: className = "", style: style, ariaLabel: ariaLabel = "Pagination", glass: glass}) => {
+}))), Pagination =  memo((({currentPage: currentPage = PAGINATION_DEFAULTS.currentPage, totalPages: totalPages = PAGINATION_DEFAULTS.totalPages, onPageChange: onPageChange, siblingCount: siblingCount = PAGINATION_DEFAULTS.siblingCount, showFirstLastButtons: showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons, showPrevNextButtons: showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons, showSearch: showSearch = !1, searchPlaceholder: searchPlaceholder = "Go to page", size: size = PAGINATION_DEFAULTS.size, className: className = "", style: style, "aria-label": ariaLabel = "Pagination", glass: glass}) => {
     const {paginationRange: paginationRange, goToPage: goToPage, nextPage: nextPage, prevPage: prevPage, firstPage: firstPage, lastPage: lastPage} = usePagination({
         currentPage: currentPage,
         totalPages: totalPages,
@@ -9330,75 +9326,56 @@ const DOTS = "...", range = (start, end) => {
 
 Pagination.displayName = "Pagination", PaginationNavButton.displayName = "PaginationNavButton";
 
-/**
- * Checkbox state and functionality
- * @param initialProps - Initial checkbox properties
- * @returns Checkbox state and methods
- */
-function useCheckbox(initialProps) {
-    // Default checkbox properties
-    const defaultProps = {
-        disabled: !1,
-        invalid: !1,
-        valid: !1,
-        indeterminate: !1,
-        ...initialProps
-    }, checkboxRef = useRef(null);
-    // Ref for the checkbox input element
-        // Handle indeterminate state
-    return useEffect((() => {
-        checkboxRef.current && (checkboxRef.current.indeterminate = Boolean(defaultProps.indeterminate));
-    }), [ defaultProps.indeterminate ]), {
-        defaultProps: defaultProps,
-        generateCheckboxClass: props => {
-            const {disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, indeterminate: indeterminate = defaultProps.indeterminate, className: className = ""} = props;
-            let validationClass = "";
-            return invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid"), 
-            `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${className}`.trim();
-        },
-        checkboxRef: checkboxRef
-    };
-}
-
-/**
- * Checkbox - A component for checkbox inputs
- */ const Checkbox =  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,
-        invalid: invalid,
-        valid: valid
-    }), checkboxClass = generateCheckboxClass({
-        className: `${className} ${glass ? "c-checkbox--glass" : ""}`.trim(),
+const Checkbox =  React.memo( forwardRef((({label: label, checked: checked, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass, ...props}, ref) => {
+    // Local ref to handle indeterminate state
+    const localRef = useRef(null);
+    // Merge refs
+        useImperativeHandle(ref, (() => localRef.current)), 
+    // Handle indeterminate
+    useEffect((() => {
+        localRef.current && (localRef.current.indeterminate = Boolean(indeterminate));
+    }), [ indeterminate ]);
+    // Generate classes
+    let validationClass = "";
+    invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid");
+    const checkboxClass = `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${glass ? "c-checkbox--glass" : ""} ${className}`.trim(), inputElement = jsx("input", {
+        ref: localRef,
+        type: "checkbox",
+        className: "c-checkbox__input",
+        checked: checked,
+        onChange: onChange,
+        onClick: onClick,
         disabled: disabled,
-        invalid: invalid,
-        valid: valid,
-        indeterminate: indeterminate
-    }), checkboxContent = jsxs("div", {
+        required: required,
+        id: id,
+        name: name,
+        value: value,
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid,
+        ...props
+    });
+    let content;
+    if (content = id && label ? jsxs("div", {
         className: checkboxClass,
         style: style,
-        children: [ jsx("input", {
-            ref: checkboxRef,
-            type: "checkbox",
-            className: "c-checkbox__input",
-            checked: checked,
-            onChange: onChange,
-            disabled: disabled,
-            required: required,
-            id: id,
-            name: name,
-            value: value,
-            "aria-label": label ? void 0 : ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            "aria-invalid": invalid
-        }), label && jsx("label", {
+        children: [ inputElement, jsx("label", {
             className: "c-checkbox__label",
             htmlFor: id,
             children: label
         }) ]
-    });
-    if (glass) {
-        // Default glass settings for checkboxes
+    }) : label ? jsxs("label", {
+        className: checkboxClass,
+        style: style,
+        children: [ inputElement, jsx("span", {
+            className: "c-checkbox__label",
+            children: label
+        }) ]
+    }) : jsx("div", {
+        className: checkboxClass,
+        style: style,
+        children: inputElement
+    }), glass) {
         const defaultGlassProps = {
             displacementScale: 40,
             blurAmount: 1,
@@ -9412,11 +9389,11 @@ function useCheckbox(initialProps) {
         };
         return jsx(AtomixGlass, {
             ...glassProps,
-            children: checkboxContent
+            children: content
         });
     }
-    return checkboxContent;
-}));
+    return content;
+})));
 
 Checkbox.displayName = "Checkbox";
 
@@ -9593,18 +9570,6 @@ const DropdownContext =  createContext({
 
 /**
  * DropdownItem component for menu items
- */
-/**
- * Sanitize cell content to prevent CSV injection
- */
-function sanitizeCSVCell(cell) {
-    const sanitized = String(cell ?? "").replace(/[\r\n\t]/g, " ").replace(/"/g, '""');
-    // Prevent formula injection by prefixing dangerous characters
-        return /^[=+\-@]/.test(sanitized) ? `'${sanitized}` : sanitized;
-}
-
-/**
- * Export data as CSV
  */ Dropdown.displayName = "Dropdown", DropdownItem.displayName = "DropdownItem", 
 DropdownDivider.displayName = "DropdownDivider", DropdownHeader.displayName = "DropdownHeader";
 
@@ -9671,7 +9636,7 @@ const DataTable =  memo((({data: data, columns: columns, className: className, s
     }), []), handleDrop = useCallback(((e, dropIndex) => {
         if (e.preventDefault(), null !== dragStartIndex && dragStartIndex !== dropIndex && onColumnReorder) {
             const newOrder = [ ...visibleColumns.map((col => col.key)) ], [removed] = newOrder.splice(dragStartIndex, 1);
-            newOrder.splice(dropIndex, 0, removed), onColumnReorder(newOrder);
+            removed && (newOrder.splice(dropIndex, 0, removed), onColumnReorder(newOrder));
         }
         setDragStartIndex(null), setDragOverIndex(null);
     }), [ dragStartIndex, visibleColumns, onColumnReorder ]), handleExport = useCallback((format => {
@@ -9683,7 +9648,11 @@ const DataTable =  memo((({data: data, columns: columns, className: className, s
             const defaultFilename = filename || "data-table";
             switch (format) {
               case "csv":
-                !function(data, columns, filename = "data-table.csv") {
+                !
+                /**
+ * Export data as CSV
+ */
+                function(data, columns, filename = "data-table.csv") {
                     if (!data.length || !columns.length) return;
                     // Create headers
                                         const headers = columns.map((col => col.title || col.key)), rows = data.map((row => columns.map((col => {
@@ -9981,7 +9950,7 @@ const DataTable =  memo((({data: data, columns: columns, className: className, s
                 showFirstLastButtons: !0,
                 showPrevNextButtons: !0,
                 size: "sm",
-                ariaLabel: "Data table pagination",
+                "aria-label": "Data table pagination",
                 className: "c-data-table__pagination"
             })
         }) ]
@@ -10965,7 +10934,7 @@ function useInput(initialProps) {
  * Input - A component for text input fields
  */ FormGroup.displayName = "FormGroup";
 
-const Input =  memo( forwardRef((({type: type = "text", value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Input =  memo( forwardRef((({type: type = "text", value: value, defaultValue: defaultValue, 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, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
     const {generateInputClass: generateInputClass} = useInput({
         size: size,
         variant: variant,
@@ -10985,6 +10954,7 @@ const Input =  memo( forwardRef((({type: type = "text", value: value, onChange:
         type: type,
         className: inputClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,
@@ -11239,7 +11209,7 @@ function useHero(initialProps) {
         backdrop: !1,
         closeOnOutsideClick: !0,
         closeOnEscape: !0,
-        ariaLabel: "Main navigation",
+        "aria-label": "Main navigation",
         ...initialProps
     }, [isExpanded, setIsExpanded] = useState(defaultProps.expanded || !1);
     // Local expanded state for when not controlled externally
@@ -12041,7 +12011,7 @@ function useTodo(initialProps) {
             items: [],
             divider: BREADCRUMB.DEFAULTS.DIVIDER,
             className: "",
-            ariaLabel: "Breadcrumb",
+            "aria-label": "Breadcrumb",
             ...initialOptions
         },
         generateBreadcrumbClass: options => {
@@ -12374,21 +12344,21 @@ function useSlider(options) {
     const [interaction, setInteraction] = useState({
         hoveredIndex: null,
         selectedIndex: null
-    }), handlePointHover = useCallback((index => {
-        setInteraction((prev => ({
-            ...prev,
-            hoveredIndex: index
-        })));
-    }), []), handlePointClick = useCallback((index => {
-        setInteraction((prev => ({
-            ...prev,
-            selectedIndex: prev.selectedIndex === index ? null : index
-        })));
-    }), []);
+    });
     return {
         interaction: interaction,
-        handlePointHover: handlePointHover,
-        handlePointClick: handlePointClick,
+        handlePointHover: useCallback((index => {
+            setInteraction((prev => ({
+                ...prev,
+                hoveredIndex: index
+            })));
+        }), []),
+        handlePointClick: useCallback((index => {
+            setInteraction((prev => ({
+                ...prev,
+                selectedIndex: prev.selectedIndex === index ? null : index
+            })));
+        }), []),
         clearInteraction: useCallback((() => {
             setInteraction({
                 hoveredIndex: null,
@@ -12399,6 +12369,8 @@ function useSlider(options) {
 }
 
 // Button composables
+// export * from './useButton';
+// Accordion composables
 const composablesImport =  Object.freeze( Object.defineProperty({
     __proto__: null,
     DOTS: "...",
@@ -12408,12 +12380,10 @@ const composablesImport =  Object.freeze( Object.defineProperty({
     useBarChart: useBarChart,
     useBlock: useBlock,
     useBreadcrumb: useBreadcrumb,
-    useButton: useButton,
     useCard: useCard,
     useChartData: useChartData,
     useChartInteraction: useChartInteraction,
     useChartScale: useChartScale,
-    useCheckbox: useCheckbox,
     useDataTable: useDataTable,
     useEdgePanel: useEdgePanel,
     useForm: useForm,
@@ -12440,7 +12410,7 @@ const composablesImport =  Object.freeze( Object.defineProperty({
     useTodo: useTodo
 }, Symbol.toStringTag, {
     value: "Module"
-})), Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+})), Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateSelectClass: generateSelectClass} = useSelect({
         size: size,
         disabled: disabled,
@@ -12588,7 +12558,7 @@ const composablesImport =  Object.freeze( Object.defineProperty({
 /**
  * Radio - A component for radio button inputs
  */
-const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateRadioClass: generateRadioClass} = useRadio({
         disabled: disabled,
         invalid: invalid,
@@ -12646,7 +12616,7 @@ Radio.displayName = "Radio";
 /**
  * Textarea - A component for multiline text input
  */
-const Textarea =  memo( forwardRef((({value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Textarea =  memo( forwardRef((({value: value, defaultValue: defaultValue, 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, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
     const {generateTextareaClass: generateTextareaClass} = useTextarea({
         size: size,
         variant: variant,
@@ -12664,6 +12634,7 @@ const Textarea =  memo( forwardRef((({value: value, onChange: onChange, onBlur:
         ref: ref,
         className: textareaClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,
@@ -14206,7 +14177,7 @@ NavItem.displayName = "NavItem";
  * </Navbar>
  * ```
  */
-const Navbar =  forwardRef((({brand: brand, children: children, variant: variant, position: position = "static", containerWidth: containerWidth, collapsible: collapsible = !0, expanded: expanded, onToggle: onToggle, className: className = "", style: style, disabled: disabled = !1, backdrop: backdrop = !1, closeOnOutsideClick: closeOnOutsideClick = !0, closeOnEscape: closeOnEscape = !0, ariaLabel: ariaLabel = "Main navigation", id: id, glass: glass}, ref) => {
+const Navbar =  forwardRef((({brand: brand, children: children, variant: variant, position: position = "static", containerWidth: containerWidth, collapsible: collapsible = !0, expanded: expanded, onToggle: onToggle, className: className = "", style: style, disabled: disabled = !1, backdrop: backdrop = !1, closeOnOutsideClick: closeOnOutsideClick = !0, closeOnEscape: closeOnEscape = !0, "aria-label": ariaLabel = "Main navigation", id: id, glass: glass}, ref) => {
     const {generateNavbarClass: generateNavbarClass, generateContainerStyle: generateContainerStyle, generateCollapseClass: generateCollapseClass} = useNavbar({
         position: position,
         collapsible: collapsible,
@@ -16284,7 +16255,7 @@ const PopoverContext =  createContext({
 /**
  * Hook for managing rating component state and interactions
  */
-const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", color: color, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
+const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", variant: variant, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
     const internalRef = useRef(null), ratingInstance = useRef(null), {currentValue: currentValue, hoverValue: hoverValue, focusedIndex: focusedIndex, setHoverValue: setHoverValue, setFocused: setFocused, handleKeyDown: handleKeyDown} = (({value: value = 0, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, onChange: onChange}) => {
         // Determine if component is in controlled mode
         const isControlled = void 0 !== onChange, [internalValue, setInternalValue] = useState(value), [hoverValue, setHoverValue] = useState(null), [focusedIndex, setFocusedIndex] = useState(null), currentValue = isControlled ? value : internalValue, handleMouseEnter = useCallback((starValue => {
@@ -16379,7 +16350,7 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
         return () => {
             ratingInstance.current && ratingInstance.current.destroy();
         };
-    }), [ useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, color, onChange ]), 
+    }), [ useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, variant, onChange ]), 
     // Update vanilla JS implementation when props change
     useEffect((() => {
         useVanillaJS && ratingInstance.current && ratingInstance.current.updateOptions({
@@ -16388,11 +16359,11 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
             allowHalf: allowHalf,
             readOnly: readOnly,
             size: size,
-            color: color
+            variant: variant
         });
-    }), [ useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, color ]);
+    }), [ useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, variant ]);
     // Determine CSS classes
-    const ratingClasses = [ "c-rating", "sm" === size ? RATING.CLASSES.SMALL : "", "lg" === size ? RATING.CLASSES.LARGE : "", color ? `c-rating--${color}` : "", className ].filter(Boolean).join(" ");
+    const ratingClasses = [ "c-rating", "sm" === size ? RATING.CLASSES.SMALL : "", "lg" === size ? RATING.CLASSES.LARGE : "", variant ? `c-rating--${variant}` : "", className ].filter(Boolean).join(" ");
     // If using vanilla JS, just render the container
         if (useVanillaJS) return jsx("div", {
         className: ratingClasses,
@@ -16416,7 +16387,7 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
             const stars = [], roundedValue = allowHalf ? Math.floor(2 * effectiveValue) / 2 : Math.round(effectiveValue), componentId = id || `rating-${Math.random().toString(36).substring(2, 9)}`;
             for (let i = 1; i <= maxValue; i++) {
                 // For half-star support
-                const isFullStar = i <= Math.floor(roundedValue), isHalfStar = allowHalf && i - .5 === roundedValue, starClass = [ "c-rating__star", isFullStar ? RATING.CLASSES.FULL : "", isHalfStar ? RATING.CLASSES.HALF : "", color ? `c-rating__star--${color}` : "", focusedIndex === i ? "c-rating__star--focused" : "" ].filter(Boolean).join(" "), starId = `${componentId}-star-${i}`;
+                const isFullStar = i <= Math.floor(roundedValue), isHalfStar = allowHalf && i - .5 === roundedValue, starClass = [ "c-rating__star", isFullStar ? RATING.CLASSES.FULL : "", isHalfStar ? RATING.CLASSES.HALF : "", variant ? `c-rating__star--${variant}` : "", focusedIndex === i ? "c-rating__star--focused" : "" ].filter(Boolean).join(" "), starId = `${componentId}-star-${i}`;
                 stars.push(jsx("div", {
                     id: starId,
                     className: starClass,
@@ -16496,8 +16467,8 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
  * <Rating value={3} onChange={handleRatingChange} />
  *
  * @example
- * // Read-only with custom color
- * <Rating value={4.5} readOnly color="warning" />
+ * // Read-only with custom variant
+ * <Rating value={4.5} readOnly variant="warning" />
  *
  * @example
  * // With half-star support
@@ -16571,7 +16542,7 @@ const ProductReview = ({productName: productName, productImage: productImage, in
                         allowHalf: allowHalf,
                         maxValue: maxRating,
                         size: "lg",
-                        color: ratingColor
+                        variant: ratingColor
                     }), jsx("span", {
                         className: "c-rating__value",
                         children: rating > 0 ? rating.toFixed(1) : "Select a rating"
@@ -16609,7 +16580,7 @@ ProductReview.displayName = "ProductReview";
 /**
  * Hook for managing Progress component state and behavior
  */
-const Progress =  memo( forwardRef((({value: value, variant: variant = "primary", size: size = "md", className: className = "", style: style, disabled: disabled = !1, ariaLabel: ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL, glass: glass}, ref) => {
+const Progress =  memo( forwardRef((({value: value, variant: variant = "primary", size: size = "md", className: className = "", style: style, disabled: disabled = !1, "aria-label": 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";
@@ -17299,28 +17270,29 @@ Todo.displayName = "Todo";
 /**
  * Toggle component for switching between two states
  */
-const Toggle = ({initialOn: initialOn = !1, onToggleOn: onToggleOn, onToggleOff: onToggleOff, disabled: disabled = !1, className: className = "", style: style, glass: glass}) => {
-    const [isOn, setIsOn] = useState(initialOn), handleClick = () => {
+const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1, onChange: onChange, disabled: disabled = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy}) => {
+    const isControlled = void 0 !== controlledChecked, [internalChecked, setInternalChecked] = useState(defaultChecked), isChecked = isControlled ? controlledChecked : internalChecked, handleClick = useCallback((() => {
         if (disabled) return;
-        const newState = !isOn;
-        setIsOn(newState), newState ? onToggleOn && onToggleOn() : onToggleOff && onToggleOff();
-    }, toggleContent = jsx("div", {
-        className: `c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ""} ${disabled ? "is-disabled" : ""} ${className}`,
+        const nextChecked = !isChecked;
+        isControlled || setInternalChecked(nextChecked), onChange?.(nextChecked);
+    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", className ].filter(Boolean).join(" "), toggleContent = jsx("div", {
+        className: toggleClass,
         style: style,
         onClick: handleClick,
         onKeyDown: e => {
             disabled || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), handleClick());
         },
         role: "switch",
-        "aria-checked": isOn,
+        "aria-checked": isChecked,
         tabIndex: disabled ? -1 : 0,
         "aria-disabled": disabled,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
         children: jsx("div", {
             className: "c-toggle__switch"
         })
     });
-    // Handle toggle click
-        if (glass) {
+    if (glass) {
         // Default glass settings for toggles
         const defaultGlassProps = {
             displacementScale: 60,
@@ -17466,7 +17438,7 @@ const Tooltip =  memo((({content: content, children: children, position: positio
         delay: delay
     });
     return jsxs("div", {
-        className: "u-position-relative u-d-inline-block",
+        className: "u-position-relative u-inline-block",
         style: style,
         ...wrapperProps,
         children: [ jsx("div", {
@@ -18677,7 +18649,6 @@ const components =  Object.freeze( Object.defineProperty({
     FOOTER: FOOTER,
     FORM: FORM,
     FORM_GROUP: FORM_GROUP,
-    GLASS_CONTAINER: GLASS_CONTAINER,
     HERO: HERO,
     INPUT: INPUT,
     LIST: LIST,
@@ -19108,6 +19079,14 @@ function createTokens(overrides) {
     ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
     /** CSS injection failed */
     ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
+    /** Invalid color format */
+    ThemeErrorCode.INVALID_COLOR_FORMAT = "INVALID_COLOR_FORMAT", 
+    /** Missing required token */
+    ThemeErrorCode.MISSING_REQUIRED_TOKEN = "MISSING_REQUIRED_TOKEN", 
+    /** Accessibility contrast violation */
+    ThemeErrorCode.CONTRAST_VIOLATION = "CONTRAST_VIOLATION", 
+    /** Invalid token type */
+    ThemeErrorCode.INVALID_TOKEN_TYPE = "INVALID_TOKEN_TYPE", 
     /** Unknown error */
     ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
 }(ThemeErrorCode || (ThemeErrorCode = {}));
@@ -19409,29 +19388,6 @@ class ThemeLogger {
     return Object.keys(registry).length;
 }
 
-/**
- * Core Theme Engine
- *
- * Core theme creation, composition, and registry functionality
- */ const index =  Object.freeze( Object.defineProperty({
-    __proto__: null,
-    clearThemes: clearThemes,
-    createTheme: createTheme,
-    createThemeRegistry: createThemeRegistry,
-    deepMerge: deepMerge,
-    extendTheme: extendTheme,
-    getAllThemes: getAllThemes,
-    getTheme: getTheme,
-    getThemeCount: getThemeCount,
-    getThemeIds: getThemeIds,
-    hasTheme: hasTheme,
-    mergeTheme: mergeTheme,
-    registerTheme: registerTheme,
-    unregisterTheme: unregisterTheme
-}, Symbol.toStringTag, {
-    value: "Module"
-}));
-
 /**
  * CSS Injection Utilities
  *
@@ -19604,7 +19560,7 @@ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof do
 /**
  * Convert hex color to RGB object
  */
-function hexToRgb(hex) {
+function hexToRgb$1(hex) {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result ? {
         r: parseInt(result[1], 16),
@@ -19624,7 +19580,7 @@ function hexToRgb(hex) {
  * Calculate relative luminance of a color
  * Used for determining contrast ratios
  */ function getLuminance(color) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return 0;
     const {r: r, g: g, b: b} = rgb, [rs, gs, bs] = [ r ?? 0, g ?? 0, b ?? 0 ].map((c => {
         const val = c / 255;
@@ -19654,7 +19610,7 @@ function hexToRgb(hex) {
  * @param amount - Amount to lighten (0-1), default 0.2
  * @returns Lightened hex color
  */ function lighten(color, amount = .2) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return color;
     const {r: r, g: g, b: b} = rgb, lightenValue = val => Math.min(255, Math.round(val + (255 - val) * amount));
     return rgbToHex(lightenValue(r), lightenValue(g), lightenValue(b));
@@ -19667,7 +19623,7 @@ function hexToRgb(hex) {
  * @param amount - Amount to darken (0-1), default 0.2
  * @returns Darkened hex color
  */ function darken(color, amount = .2) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return color;
     const {r: r, g: g, b: b} = rgb, darkenValue = val => Math.max(0, Math.round(val * (1 - amount)));
     return rgbToHex(darkenValue(r), darkenValue(g), darkenValue(b));
@@ -19680,7 +19636,7 @@ function hexToRgb(hex) {
  * @param opacity - Opacity value (0-1)
  * @returns RGBA color string
  */ function alpha(color, opacity) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return color;
     const {r: r, g: g, b: b} = rgb;
     return `rgba(${r}, ${g}, ${b}, ${Math.max(0, Math.min(1, opacity))})`;
@@ -19699,7 +19655,7 @@ function hexToRgb(hex) {
  */
 function generateColorScale(baseColor, prefix, colorName) {
     const vars = {};
-    if (!hexToRgb(baseColor)) return vars;
+    if (!hexToRgb$1(baseColor)) return vars;
     // Generate 10-step scale
     // Steps 1-5: lighter variations
     // Step 6: base color
@@ -19745,7 +19701,7 @@ function generateCSSVariables(theme, options = {}) {
                 // Main color (flat structure, matches SCSS: --atomix-primary)
                 vars[`${prefix}-${key}`] = color.main;
                 // Generate RGB for transparency support (matches SCSS: --atomix-primary-rgb)
-                const rgb = hexToRgb(color.main);
+                const rgb = hexToRgb$1(color.main);
                 // Generate full color scale (1-10) - matches SCSS: --atomix-primary-1 through --atomix-primary-10
                 // Only for primary, secondary, error, warning, info, success (not for light/dark)
                 if (rgb && (vars[`${prefix}-${key}-rgb`] = `${rgb.r}, ${rgb.g}, ${rgb.b}`), "light" !== key && "dark" !== key) {
@@ -19828,11 +19784,11 @@ function generateCSSVariables(theme, options = {}) {
         // Heading color (defaults to text primary) - matches SCSS: --atomix-heading-color
         palette.text && (vars[`${prefix}-heading-color`] = palette.text.primary), palette.primary) {
             vars[`${prefix}-link-color`] = palette.primary.main;
-            const linkRgb = hexToRgb(palette.primary.main);
+            const linkRgb = hexToRgb$1(palette.primary.main);
             linkRgb && (vars[`${prefix}-link-color-rgb`] = `${linkRgb.r}, ${linkRgb.g}, ${linkRgb.b}`), 
             // Link hover color (slightly darker)
             vars[`${prefix}-link-hover-color`] = palette.primary.dark || darken(palette.primary.main, .1);
-            const linkHoverRgb = hexToRgb(palette.primary.dark || darken(palette.primary.main, .1));
+            const linkHoverRgb = hexToRgb$1(palette.primary.dark || darken(palette.primary.main, .1));
             linkHoverRgb && (vars[`${prefix}-link-hover-color-rgb`] = `${linkHoverRgb.r}, ${linkHoverRgb.g}, ${linkHoverRgb.b}`), 
             // Link decoration (default: none, matching tokens list)
             vars[`${prefix}-link-decoration`] = "none";
@@ -20290,17 +20246,292 @@ function generateClassName(block, element, modifiers) {
 ThemeContext.displayName = "ThemeContext";
 
 /**
- * Theme Provider
+ * Theme Validation Utilities
  *
- * React context provider for theme management with separated concerns.
- * Simplified version focusing on core functionality:
- * - String-based themes (CSS files)
- * - DesignTokens (dynamic themes)
- * - Persistence via localStorage
- *
- * Falls back to 'default' theme if no configuration is found.
+ * Comprehensive validation utilities for DesignTokens objects.
+ * Includes color format validation, accessibility checks, and required properties verification.
+ */
+const logger$1 = getLogger(), COLOR_PATTERNS = {
+    /** Hex color: #RGB, #RRGGBB, #RRGGBBAA */
+    hex: /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/,
+    /** RGB color: rgb(r, g, b) or rgb(r, g, b, a) */
+    rgb: /^rgb\(\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*(?:,\s*([01]?\.?\d+))?\s*\)$/,
+    /** RGBA color: rgba(r, g, b, a) */
+    rgba: /^rgba\(\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*,\s*([01]?\.?\d+)\s*\)$/,
+    /** HSL color: hsl(h, s%, l%) */
+    hsl: /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/,
+    /** HSLA color: hsla(h, s%, l%, a) */
+    hsla: /^hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*,\s*([01]?\.?\d+)\s*\)$/
+}, REQUIRED_COLOR_TOKENS = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ], REQUIRED_TEXT_EMPHASIS_TOKENS = [ "primary-text-emphasis", "secondary-text-emphasis", "tertiary-text-emphasis", "disabled-text-emphasis" ], ACCESSIBILITY_CHECKS = [ {
+    text: "primary-text-emphasis",
+    background: "primary-bg-subtle",
+    name: "Primary text on subtle background"
+}, {
+    text: "secondary-text-emphasis",
+    background: "secondary-bg-subtle",
+    name: "Secondary text on subtle background"
+}, {
+    text: "error-text-emphasis",
+    background: "error-bg-subtle",
+    name: "Error text on subtle background"
+}, {
+    text: "success-text-emphasis",
+    background: "success-bg-subtle",
+    name: "Success text on subtle background"
+} ];
+
+/**
+ * Color format validation patterns
+ */
+/**
+ * Parse RGB/RGBA color string to RGB values
+ */
+function rgbToRgb(rgb) {
+    const match = rgb.match(COLOR_PATTERNS.rgb) || rgb.match(COLOR_PATTERNS.rgba);
+    if (!match) return null;
+    const r = parseInt(match[1] ?? "0", 10), g = parseInt(match[2] ?? "0", 10), b = parseInt(match[3] ?? "0", 10);
+    // Validate RGB ranges
+    return r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 ? null : {
+        r: r,
+        g: g,
+        b: b
+    };
+}
+
+/**
+ * Parse HSL/HSLA color string to RGB values
+ */ function hslToRgb(hsl) {
+    const match = hsl.match(COLOR_PATTERNS.hsl) || hsl.match(COLOR_PATTERNS.hsla);
+    if (!match) return null;
+    let h = parseInt(match[1] ?? "0", 10) / 360, s = parseInt(match[2] ?? "0", 10) / 100, l = parseInt(match[3] ?? "0", 10) / 100;
+    // Validate HSL ranges
+    if (h < 0 || h > 1 || s < 0 || s > 1 || l < 0 || l > 1) return null;
+    const hue2rgb = (p, q, t) => (t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p + 6 * (q - p) * t : t < .5 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p);
+    let r, g, b;
+    if (0 === s) r = g = b = l; // achromatic
+     else {
+        const q = l < .5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+        r: Math.round(255 * r),
+        g: Math.round(255 * g),
+        b: Math.round(255 * b)
+    };
+}
+
+/**
+ * Convert any valid color format to RGB values
+ */ function colorToRgb(color) {
+    // Try hex first
+    return COLOR_PATTERNS.hex.test(color) ? 
+    /**
+ * Convert hex color to RGB values
+ */
+    function(hex) {
+        const result = COLOR_PATTERNS.hex.exec(hex);
+        if (!result || !result[1]) return null;
+        const digits = result[1];
+        let r, g, b;
+        switch (digits.length) {
+          case 3:
+          case 4:
+            // #RGBA (ignore alpha)
+            r = parseInt((digits[0] ?? "0") + (digits[0] ?? "0"), 16), g = parseInt((digits[1] ?? "0") + (digits[1] ?? "0"), 16), 
+            b = parseInt((digits[2] ?? "0") + (digits[2] ?? "0"), 16);
+            break;
+
+          case 6:
+          case 8:
+            // #RRGGBBAA (ignore alpha)
+            r = parseInt(digits.slice(0, 2), 16), g = parseInt(digits.slice(2, 4), 16), b = parseInt(digits.slice(4, 6), 16);
+            break;
+
+          default:
+            return null;
+        }
+        return {
+            r: r,
+            g: g,
+            b: b
+        };
+    }(color) : 
+    // Try RGB/RGBA
+    color.startsWith("rgb") ? rgbToRgb(color) : 
+    // Try HSL/HSLA
+    color.startsWith("hsl") ? hslToRgb(color) : null;
+}
+
+/**
+ * Validate that a color string is in a valid format (hex, rgb, hsl, etc.)
+ * Includes validation of value ranges for RGB and HSL
+ */
+/**
+ * Calculate relative luminance of a color
+ * Based on WCAG guidelines: https://www.w3.org/TR/WCAG20-TECHS/G17.html
  */
-const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, useMinified: useMinified = !1, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, onThemeChange: onThemeChange, onError: onError}) => {
+function getRelativeLuminance(r, g, b) {
+    const normalize = val => (val /= 255) <= .03928 ? val / 12.92 : Math.pow((val + .055) / 1.055, 2.4);
+    return .2126 * normalize(r) + .7152 * normalize(g) + .0722 * normalize(b);
+}
+
+/**
+ * Calculate contrast ratio between two colors (supports multiple formats)
+ */
+/**
+ * Check if contrast ratio meets WCAG AA standards
+ * AA requires 4.5:1 for normal text, 3:1 for large text
+ */
+function validateContrastRatio(foreground, background, isLargeText = !1) {
+    const ratio = function(color1, color2) {
+        const rgb1 = colorToRgb(color1), rgb2 = colorToRgb(color2);
+        if (!rgb1 || !rgb2) return null;
+        const lum1 = getRelativeLuminance(rgb1.r, rgb1.g, rgb1.b), lum2 = getRelativeLuminance(rgb2.r, rgb2.g, rgb2.b);
+        return (Math.max(lum1, lum2) + .05) / (Math.min(lum1, lum2) + .05);
+    }(foreground, background);
+    if (null === ratio) return {
+        valid: !1,
+        ratio: 0,
+        requiredRatio: isLargeText ? 3 : 4.5
+    };
+    const requiredRatio = isLargeText ? 3 : 4.5;
+    return {
+        valid: ratio >= requiredRatio,
+        ratio: ratio,
+        requiredRatio: requiredRatio
+    };
+}
+
+/**
+ * Validate all color formats in DesignTokens
+ */
+/**
+ * Comprehensive validation of DesignTokens
+ */
+function validateDesignTokens(tokens, options = {}) {
+    const results = [];
+    options.skipRequiredTokens || results.push(
+    /**
+ * Validate that all required tokens are present
+ */
+    function(tokens) {
+        const errors = [], warnings = [];
+        // Check required color tokens
+        for (const token of REQUIRED_COLOR_TOKENS) token in tokens || errors.push(`Required color token '${token}' is missing`);
+        // Check required text emphasis tokens
+                for (const token of REQUIRED_TEXT_EMPHASIS_TOKENS) token in tokens || errors.push(`Required text emphasis token '${token}' is missing`);
+        // Check for RGB versions of base colors
+                for (const token of REQUIRED_COLOR_TOKENS) {
+            const rgbToken = `${token}-rgb`;
+            rgbToken in tokens || warnings.push(`RGB version of '${token}' token '${rgbToken}' is missing`);
+        }
+        return {
+            valid: 0 === errors.length,
+            errors: errors,
+            warnings: warnings
+        };
+    }
+    /**
+ * Validate accessibility contrast ratios
+ */ (tokens)), options.skipColorValidation || results.push(function(tokens) {
+        const errors = [], colorTokenKeys = new Set([ 
+        // Base colors
+        "primary", "secondary", "success", "info", "warning", "error", "light", "dark", 
+        // Text emphasis
+        "primary-text-emphasis", "secondary-text-emphasis", "tertiary-text-emphasis", "disabled-text-emphasis", "invert-text-emphasis", "brand-text-emphasis", "error-text-emphasis", "success-text-emphasis", "warning-text-emphasis", "info-text-emphasis", "light-text-emphasis", "dark-text-emphasis", 
+        // Background subtle
+        "primary-bg-subtle", "secondary-bg-subtle", "tertiary-bg-subtle", "invert-bg-subtle", "brand-bg-subtle", "error-bg-subtle", "success-bg-subtle", "warning-bg-subtle", "info-bg-subtle", "light-bg-subtle", "dark-bg-subtle", 
+        // Border subtle
+        "primary-border-subtle", "secondary-border-subtle", "success-border-subtle", "error-border-subtle", "warning-border-subtle", "info-border-subtle", "brand-border-subtle", "light-border-subtle", "dark-border-subtle", 
+        // Hover states
+        "primary-hover", "secondary-hover", "light-hover", "dark-hover", "error-hover", "success-hover", "warning-hover", "info-hover", 
+        // Colors from scales (primary, red, green, blue, yellow)
+        ...Array.from({
+            length: 10
+        }, ((_, i) => [ `primary-${i + 1}`, `red-${i + 1}`, `green-${i + 1}`, `blue-${i + 1}`, `yellow-${i + 1}` ])).flat(), 
+        // Gray scale
+        ...Array.from({
+            length: 10
+        }, ((_, i) => `gray-${i + 1}`)), 
+        // Body colors
+        "body-color", "heading-color", 
+        // Link colors
+        "link-color", "link-hover-color", 
+        // Highlight & code
+        "highlight-bg", "code-color", 
+        // Border colors
+        "border-color", "border-color-translucent", 
+        // Focus ring
+        "focus-border-color", 
+        // Form validation
+        "form-valid-color", "form-valid-border-color", "form-invalid-color", "form-invalid-border-color" ]);
+        for (const key of colorTokenKeys) {
+            if (!(key in tokens)) continue;
+ // Skip if token not present
+                        const value = tokens[key];
+            "string" == typeof value ? (color = value, 
+            // Check hex first (regex is sufficient)
+            COLOR_PATTERNS.hex.test(color) || (
+            // Check RGB/RGBA with value validation
+            COLOR_PATTERNS.rgb.test(color) || COLOR_PATTERNS.rgba.test(color) ? null !== rgbToRgb(color) : 
+            // Check HSL/HSLA with value validation
+            (COLOR_PATTERNS.hsl.test(color) || COLOR_PATTERNS.hsla.test(color)) && null !== hslToRgb(color)) || errors.push(`Token '${key}' has invalid color format: '${value}'`)) : errors.push(`Token '${key}' must be a string, got ${typeof value}`);
+        }
+        var color;
+        return {
+            valid: 0 === errors.length,
+            errors: errors,
+            warnings: []
+        };
+    }(tokens)), options.skipAccessibility || results.push(function(tokens) {
+        const errors = [], warnings = [];
+        for (const check of ACCESSIBILITY_CHECKS) {
+            const textColor = tokens[check.text], bgColor = tokens[check.background];
+            if (!textColor || !bgColor) {
+                warnings.push(`Cannot validate contrast for ${check.name}: missing tokens`);
+                continue;
+            }
+            const contrast = validateContrastRatio(textColor, bgColor);
+            if (!contrast.valid) {
+                const level = 3 === contrast.requiredRatio ? "large text (AA)" : "normal text (AA)";
+                errors.push(`${check.name}: contrast ratio ${contrast.ratio.toFixed(2)}:1 is below required ${contrast.requiredRatio}:1 for ${level}`);
+            }
+        }
+        return {
+            valid: 0 === errors.length,
+            errors: errors,
+            warnings: warnings
+        };
+    }(tokens));
+    const allErrors = results.flatMap((r => r.errors)), allWarnings = results.flatMap((r => r.warnings)), valid = 0 === allErrors.length;
+    // Log validation results
+    return valid ? allWarnings.length > 0 ? logger$1.warn(`DesignTokens validation passed with ${allWarnings.length} warnings`, {
+        warnings: allWarnings
+    }) : logger$1.debug("DesignTokens validation passed") : logger$1.error("DesignTokens validation failed", new Error(`Validation failed with ${allErrors.length} errors and ${allWarnings.length} warnings`), {
+        errors: allErrors,
+        warnings: allWarnings,
+        tokenCount: Object.keys(tokens).length
+    }), {
+        valid: valid,
+        errors: allErrors,
+        warnings: allWarnings
+    };
+}
+
+/**
+ * Safely validate and merge partial tokens with defaults
+ */ function validateAndMergeTokens(partialTokens) {
+    const merged = {
+        ...defaultTokens,
+        ...partialTokens
+    };
+    return {
+        tokens: merged,
+        validation: validateDesignTokens(merged)
+    };
+}
+
+const logger = getLogger(), ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, useMinified: useMinified = !1, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, onThemeChange: onThemeChange, onError: onError}) => {
     // Store callbacks in refs to avoid recreating when they change
     const onThemeChangeRef = useRef(onThemeChange), onErrorRef = useRef(onError);
     // Update ref when callback changes
@@ -20321,12 +20552,20 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
         // If defaultTheme is provided, use it
                 return null != defaultTheme ? defaultTheme : "default";
         // Default fallback
-        }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() => 
-    // If defaultTheme is DesignTokens, store them
-    defaultTheme && "string" != typeof defaultTheme ? createTokens(defaultTheme) : null)), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({}), abortControllerRef = useRef(null);
+        }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() => {
+        // If defaultTheme is DesignTokens, validate and store them
+        if (defaultTheme && "string" != typeof defaultTheme) {
+            const {tokens: tokens, validation: validation} = validateAndMergeTokens(defaultTheme);
+            return validation.valid ? tokens : (logger.warn("Invalid default theme tokens, using defaults", {
+                errors: validation.errors,
+                warnings: validation.warnings
+            }), createTokens({}));
+        }
+        return null;
+    })), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({}), abortControllerRef = useRef(null);
     // Handle initial DesignTokens defaultTheme
     useEffect((() => {
-        defaultTheme && "string" != typeof defaultTheme && activeTokens && !isServer() && injectCSS$1(createTheme(defaultTheme), "theme-tokens-theme");
+        defaultTheme && "string" != typeof defaultTheme && activeTokens && !isServer() && injectCSS$1(createTheme(activeTokens), "theme-tokens-theme");
     }), [ defaultTheme, activeTokens ]), // Run when defaultTheme or activeTokens change
     // Apply initial theme attributes to document element
     useEffect((() => {
@@ -20356,19 +20595,42 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
             if ("string" != typeof theme) {
                 // Check if aborted before processing
                 if (abortController.signal.aborted) return;
-                // For DesignTokens, create CSS and inject it
-                                const {createTheme: createTheme} = await Promise.resolve().then((() => index)), css = createTheme(theme), themeId = "tokens-theme";
+                // Validate and merge DesignTokens
+                                const {tokens: validatedTokens, validation: validation} = validateAndMergeTokens(theme);
+                if (!validation.valid) {
+                    const errorMsg = `Invalid DesignTokens provided: ${validation.errors.join(", ")}`, validationError = new Error(errorMsg);
+                    // Default to true
+                    if (logger.error("Theme validation failed", validationError, {
+                        errors: validation.errors,
+                        warnings: validation.warnings
+                    }), !1 !== options?.fallbackOnError) {
+                        logger.warn("Falling back to default theme due to validation errors");
+                        // Use default tokens instead
+                        const {tokens: defaultTokens} = validateAndMergeTokens({}), css = createTheme(defaultTokens), themeId = "tokens-theme-fallback";
+                        // Check if aborted before state update
+                        if (abortController.signal.aborted) return;
+                        // Remove any previously loaded theme CSS
+                                                return removeCSS(`theme-${currentTheme}`), 
+                        // Inject new theme CSS
+                        injectCSS$1(css, `theme-${themeId}`), 
+                        // Store default tokens
+                        setActiveTokens(defaultTokens), setCurrentTheme(themeId), handleThemeChange(defaultTokens), 
+                        handleError(validationError, themeId), void setIsLoading(!1);
+                    }
+                    // No fallback, throw the error
+                    throw validationError;
+                }
+                // For valid DesignTokens, create CSS and inject it
+                                const css = createTheme(validatedTokens), themeId = "tokens-theme";
                 // Check if aborted after async operation
                 if (abortController.signal.aborted) return;
                 // Remove any previously loaded theme CSS
-                                removeCSS(`theme-${currentTheme}`), 
-                // Inject new theme CSS
-                injectCSS$1(css, `theme-${themeId}`);
-                // Store tokens for reference
-                const fullTokens = createTokens(theme);
+                                // Store validated tokens for reference
                 // Check if aborted before state update
-                                if (abortController.signal.aborted) return;
-                return setActiveTokens(fullTokens), setCurrentTheme(themeId), handleThemeChange(fullTokens), 
+                if (removeCSS(`theme-${currentTheme}`), 
+                // Inject new theme CSS
+                injectCSS$1(css, `theme-${themeId}`), abortController.signal.aborted) return;
+                return setActiveTokens(validatedTokens), setCurrentTheme(themeId), handleThemeChange(validatedTokens), 
                 void setIsLoading(!1);
             }
             // If it's a string theme name, load the associated CSS
@@ -20383,30 +20645,33 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
                     // If previous load failed, continue with new load
                 }
                 // Load CSS theme
-                                const themeLoadPromise = new Promise((async (resolve, reject) => {
-                    try {
-                        // Check if aborted
-                        if (abortController.signal.aborted) return void resolve();
-                        if (!themes[theme]) throw new Error(`Theme metadata not found for theme: ${theme}`);
-                        {
-                            // Build CSS path using utility function
-                            const cssPath = buildThemePath(theme, basePath, useMinified, cdnPath);
+                                const themeLoadPromise = new Promise(((resolve, reject) => {
+                    // Start the async operation
+                    (async () => {
+                        try {
                             // Check if aborted
-                                                        if (abortController.signal.aborted) return void resolve();
-                            // Load CSS file (using loadThemeCSS from domUtils)
-                                                        const {loadThemeCSS: loadThemeCSS} = await Promise.resolve().then((() => domUtils));
-                            // Check if aborted after async operation
-                            if (await loadThemeCSS(cssPath, `theme-${theme}`), abortController.signal.aborted) return void resolve();
-                            // Remove any previously loaded theme CSS
-                                                        removeCSS(`theme-${String(currentTheme)}`), loadedThemesRef.current.add(theme), 
-                            setCurrentTheme(theme), setActiveTokens(null), handleThemeChange(theme), resolve();
+                            if (abortController.signal.aborted) return void resolve();
+                            if (!themes[theme]) throw new Error(`Theme metadata not found for theme: ${theme}`);
+                            {
+                                // Build CSS path using utility function
+                                const cssPath = buildThemePath(theme, basePath, useMinified, cdnPath);
+                                // Check if aborted
+                                                                if (abortController.signal.aborted) return void resolve();
+                                // Load CSS file (using loadThemeCSS from domUtils)
+                                                                const {loadThemeCSS: loadThemeCSS} = await Promise.resolve().then((() => domUtils));
+                                // Check if aborted after async operation
+                                if (await loadThemeCSS(cssPath, `theme-${theme}`), abortController.signal.aborted) return void resolve();
+                                // Remove any previously loaded theme CSS
+                                                                removeCSS(`theme-${String(currentTheme)}`), loadedThemesRef.current.add(theme), 
+                                setCurrentTheme(theme), setActiveTokens(null), handleThemeChange(theme), resolve();
+                            }
+                        } catch (err) {
+                            // Don't reject if aborted
+                            if (abortController.signal.aborted) return void resolve();
+                            const error = err instanceof Error ? err : new Error(String(err));
+                            setError(error), handleError(error, String(theme)), reject(error);
                         }
-                    } catch (err) {
-                        // Don't reject if aborted
-                        if (abortController.signal.aborted) return void resolve();
-                        const error = err instanceof Error ? err : new Error(String(err));
-                        setError(error), handleError(error, String(theme)), reject(error);
-                    }
+                    })();
                 }));
                 themePromisesRef.current[theme] = themeLoadPromise;
                 try {
@@ -20471,6 +20736,17 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
     });
 };
 
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management with separated concerns.
+ * Simplified version focusing on core functionality:
+ * - String-based themes (CSS files)
+ * - DesignTokens (dynamic themes)
+ * - Persistence via localStorage
+ *
+ * Falls back to 'default' theme if no configuration is found.
+ */
 /**
  * useTheme Hook
  *
@@ -20496,7 +20772,8 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
  *   );
  * }
  * ```
- */ function useTheme() {
+ */
+function useTheme() {
     const context = useContext(ThemeContext);
     if (!context) throw new Error("useTheme must be used within a ThemeProvider");
     return {
@@ -22513,8 +22790,8 @@ function createPaletteColor(color) {
  * @returns Complete theme object
  */
 function createThemeObject(...options) {
-    // Merge all options
-    const mergedOptions = _reduceInstanceProperty(options).call(options, ((acc, option) => deepMerge(acc, option)), {}), palette = {
+    // Merge all options by spreading them into a single object
+    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),
@@ -22699,43 +22976,45 @@ function createThemeObject(...options) {
 
       case "hsl":
       case "hsla":
-        // Convert RGB to HSL (simplified)
-        const hsl = 
-        /**
+        {
+            // Convert RGB to HSL (simplified)
+            const hsl = 
+            /**
  * Convert RGB to HSL
  */
-        function(r, g, b) {
-            r /= 255, g /= 255, b /= 255;
-            const max = Math.max(r, g, b), min = Math.min(r, g, b);
-            let h = 0, s = 0;
-            const l = (max + min) / 2;
-            if (max !== min) {
-                const d = max - min;
-                switch (s = l > .5 ? d / (2 - max - min) : d / (max + min), max) {
-                  case r:
-                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-                    break;
-
-                  case g:
-                    h = ((b - r) / d + 2) / 6;
-                    break;
-
-                  case b:
-                    h = ((r - g) / d + 4) / 6;
+            function(r, g, b) {
+                r /= 255, g /= 255, b /= 255;
+                const max = Math.max(r, g, b), min = Math.min(r, g, b);
+                let h = 0, s = 0;
+                const l = (max + min) / 2;
+                if (max !== min) {
+                    const d = max - min;
+                    switch (s = l > .5 ? d / (2 - max - min) : d / (max + min), max) {
+                      case r:
+                        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                        break;
+
+                      case g:
+                        h = ((b - r) / d + 2) / 6;
+                        break;
+
+                      case b:
+                        h = ((r - g) / d + 4) / 6;
+                    }
                 }
+                return {
+                    h: Math.round(360 * h),
+                    s: Math.round(100 * s),
+                    l: Math.round(100 * l)
+                };
             }
-            return {
-                h: Math.round(360 * h),
-                s: Math.round(100 * s),
-                l: Math.round(100 * l)
-            };
-        }
-        /**
+            /**
  * Theme Live Editor Component
  *
  * Allows live editing of theme properties with instant preview
  */ (r, g, b);
-        return "hsl" === format ? `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)` : `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+            return "hsl" === format ? `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)` : `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+        }
 
       default:
         return color;
@@ -23061,8 +23340,312 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
             children: "\n        .atomix-theme-live-editor {\n          border: 1px solid #e0e0e0;\n          border-radius: 8px;\n          background: white;\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        .editor-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 16px 24px;\n          border-bottom: 1px solid #e0e0e0;\n          background: #f5f5f5;\n          border-radius: 8px 8px 0 0;\n        }\n\n        .editor-header h2 {\n          margin: 0;\n          font-size: 20px;\n          color: #333;\n        }\n\n        .editor-controls {\n          display: flex;\n          gap: 12px;\n          align-items: center;\n        }\n\n        .history-controls,\n        .mode-controls,\n        .action-controls {\n          display: flex;\n          gap: 8px;\n        }\n\n        .history-button,\n        .mode-button,\n        .export-button,\n        .copy-button {\n          padding: 8px 16px;\n          border: 1px solid #e0e0e0;\n          background: white;\n          border-radius: 4px;\n          cursor: pointer;\n          font-size: 14px;\n          transition: all 0.2s;\n        }\n\n        .history-button:hover:not(:disabled),\n        .mode-button:hover,\n        .export-button:hover,\n        .copy-button:hover {\n          background: #f5f5f5;\n        }\n\n        .history-button:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n\n        .mode-button.active {\n          background: #2196f3;\n          color: white;\n          border-color: #2196f3;\n        }\n\n        .export-button {\n          background: #4caf50;\n          color: white;\n          border-color: #4caf50;\n        }\n\n        .copy-button {\n          background: #ff9800;\n          color: white;\n          border-color: #ff9800;\n        }\n\n        .editor-content {\n          display: flex;\n          position: relative;\n          min-height: 600px;\n        }\n\n        .editor-panel,\n        .preview-panel {\n          overflow-y: auto;\n          padding: 24px;\n        }\n\n        .resizer {\n          width: 4px;\n          background: #e0e0e0;\n          cursor: col-resize;\n          position: relative;\n          flex-shrink: 0;\n          transition: background 0.2s;\n        }\n\n        .resizer:hover,\n        .resizer.resizing {\n          background: #2196f3;\n        }\n\n        .resizer::before {\n          content: '';\n          position: absolute;\n          left: -2px;\n          right: -2px;\n          top: 0;\n          bottom: 0;\n        }\n\n        .editor-panel h3,\n        .preview-panel h3 {\n          margin: 0 0 16px 0;\n          font-size: 16px;\n          color: #333;\n          border-bottom: 2px solid #2196f3;\n          padding-bottom: 8px;\n        }\n\n        .visual-editor {\n          display: flex;\n          flex-direction: column;\n          gap: 24px;\n        }\n\n        .editor-section {\n          display: flex;\n          flex-direction: column;\n          gap: 16px;\n        }\n\n        .color-format-selector {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          margin-bottom: 8px;\n        }\n\n        .color-format-selector label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #666;\n        }\n\n        .color-format-selector select {\n          padding: 6px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-size: 14px;\n          background: white;\n          cursor: pointer;\n        }\n\n        .editor-field {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n\n        .editor-field label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #666;\n        }\n\n        .color-input-group {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n        }\n\n        .color-input-group input[type=\"color\"] {\n          width: 50px;\n          height: 40px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          cursor: pointer;\n        }\n\n        .color-input-group input[type=\"text\"],\n        .editor-field input[type=\"text\"],\n        .editor-field input[type=\"number\"] {\n          flex: 1;\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-size: 14px;\n          font-family: 'Monaco', 'Menlo', monospace;\n        }\n\n        .json-editor {\n          height: 100%;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .json-editor textarea {\n          flex: 1;\n          padding: 16px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-family: 'Monaco', 'Menlo', monospace;\n          font-size: 12px;\n          line-height: 1.5;\n          resize: none;\n        }\n\n        .error-message {\n          padding: 12px;\n          background: #ffebee;\n          color: #d32f2f;\n          border-radius: 4px;\n          margin-top: 8px;\n          font-size: 14px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n        }\n\n        .error-dismiss {\n          background: none;\n          border: none;\n          color: #d32f2f;\n          font-size: 20px;\n          cursor: pointer;\n          padding: 0;\n          width: 24px;\n          height: 24px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .error-dismiss:hover {\n          background: rgba(211, 47, 47, 0.1);\n          border-radius: 50%;\n        }\n\n        .preview-panel {\n          border-left: 1px solid #e0e0e0;\n        }\n      "
         }) ]
     });
+}, DesignTokensCustomizer = ({initialTokens: initialTokens = {}, onTokensChange: onTokensChange, className: className, style: style}) => {
+    // Current tokens state
+    const [tokens, setTokens] = useState((() => createTokens(initialTokens))), [colorFormat, setColorFormat] = useState("hex"), [activeCategory, setActiveCategory] = useState("colors"), [cssPreview, setCssPreview] = useState("");
+    // Generate CSS when tokens change
+    useEffect((() => {
+        const css = createTheme(tokens, {
+            selector: ":root",
+            prefix: "atomix-preview"
+        });
+        setCssPreview(css), onTokensChange?.(tokens);
+    }), [ tokens, onTokensChange ]);
+    // Create theme object for preview
+    const previewTheme = useMemo((() => createThemeObject({
+        palette: {
+            primary: {
+                main: tokens.primary
+            },
+            secondary: {
+                main: tokens.secondary
+            },
+            error: {
+                main: tokens.error
+            },
+            warning: {
+                main: tokens.warning
+            },
+            info: {
+                main: tokens.info
+            },
+            success: {
+                main: tokens.success
+            },
+            background: {
+                default: "#ffffff",
+                subtle: tokens["secondary-bg-subtle"] || "#f3f4f6"
+            },
+            text: {
+                primary: tokens["primary-text-emphasis"] || "#111827",
+                secondary: tokens["secondary-text-emphasis"] || "#374151",
+                disabled: tokens["disabled-text-emphasis"] || "#9ca3af"
+            }
+        },
+        typography: {
+            fontFamily: tokens["body-font-family"] || '"Roboto", sans-serif',
+            fontSize: parseInt(tokens["body-font-size"] || "16")
+        },
+        spacing: factor => .25 * factor + "rem"
+    })), [ tokens ]), updateToken = useCallback(((key, value) => {
+        setTokens((prev => ({
+            ...prev,
+            [key]: value
+        })));
+    }), []), convertColorFormat = useCallback(((color, format) => {
+        // Parse current color
+        const temp = document.createElement("div");
+        temp.style.color = color, document.body.appendChild(temp);
+        const computed = window.getComputedStyle(temp).color;
+        document.body.removeChild(temp);
+        const rgbMatch = computed.match(/\d+/g);
+        if (!rgbMatch || rgbMatch.length < 3) return color;
+        const r = parseInt(rgbMatch[0] || "0", 10), g = parseInt(rgbMatch[1] || "0", 10), b = parseInt(rgbMatch[2] || "0", 10), a = rgbMatch[3] ? parseFloat(rgbMatch[3]) : 1;
+        switch (format) {
+          case "hex":
+            return `#${[ r, g, b ].map((x => x.toString(16).padStart(2, "0"))).join("")}`;
+
+          case "rgb":
+            return `rgb(${r}, ${g}, ${b})`;
+
+          case "rgba":
+            return `rgba(${r}, ${g}, ${b}, ${a})`;
+
+          case "hsl":
+          case "hsla":
+            {
+                const hsl = 
+                // RGB to HSL conversion
+                function(r, g, b) {
+                    r /= 255, g /= 255, b /= 255;
+                    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+                    let h = 0, s = 0;
+                    const l = (max + min) / 2;
+                    if (max !== min) {
+                        const d = max - min;
+                        switch (s = l > .5 ? d / (2 - max - min) : d / (max + min), max) {
+                          case r:
+                            h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                            break;
+
+                          case g:
+                            h = ((b - r) / d + 2) / 6;
+                            break;
+
+                          case b:
+                            h = ((r - g) / d + 4) / 6;
+                        }
+                    }
+                    return {
+                        h: Math.round(360 * h),
+                        s: Math.round(100 * s),
+                        l: Math.round(100 * l)
+                    };
+                }
+                // Export functions
+                (r, g, b);
+                return "hsl" === format ? `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)` : `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+            }
+
+          default:
+            return color;
+        }
+    }), []), exportTokens = useCallback((() => {
+        const dataStr = JSON.stringify(tokens, null, 2), dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr), linkElement = document.createElement("a");
+        linkElement.setAttribute("href", dataUri), linkElement.setAttribute("download", "design-tokens.json"), 
+        linkElement.click();
+    }), [ tokens ]), exportTheme = useCallback((() => {
+        const themeCss = createTheme(tokens), dataUri = "data:text/css;charset=utf-8," + encodeURIComponent(themeCss), linkElement = document.createElement("a");
+        linkElement.setAttribute("href", dataUri), linkElement.setAttribute("download", "theme.css"), 
+        linkElement.click();
+    }), [ tokens ]), copyToClipboard = useCallback((() => {
+        navigator.clipboard?.writeText(JSON.stringify(tokens, null, 2));
+    }), [ tokens ]), resetToDefaults = useCallback((() => {
+        setTokens(defaultTokens);
+    }), []), loadTokensFromFile = useCallback((event => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+        const reader = new FileReader;
+        reader.onload = e => {
+            try {
+                const content = e.target?.result, mergedTokens = createTokens(JSON.parse(content));
+                setTokens(mergedTokens);
+            } catch (error) {
+                console.error("Failed to load tokens:", error), alert("Invalid JSON file. Please select a valid design tokens JSON file.");
+            }
+        }, reader.readAsText(file);
+    }), []), tokenCategories = {
+        colors: {
+            label: "Colors",
+            tokens: [ 
+            // Base colors
+            "primary", "secondary", "success", "info", "warning", "error", "light", "dark", 
+            // RGB versions
+            "primary-rgb", "secondary-rgb", "success-rgb", "info-rgb", "warning-rgb", "error-rgb", "light-rgb", "dark-rgb", 
+            // Gray scale
+            "gray-1", "gray-2", "gray-3", "gray-4", "gray-5", "gray-6", "gray-7", "gray-8", "gray-9", "gray-10", 
+            // Primary scale
+            "primary-1", "primary-2", "primary-3", "primary-4", "primary-5", "primary-6", "primary-7", "primary-8", "primary-9", "primary-10", 
+            // Text emphasis
+            "primary-text-emphasis", "secondary-text-emphasis", "tertiary-text-emphasis", "disabled-text-emphasis", "invert-text-emphasis", "brand-text-emphasis", "error-text-emphasis", "success-text-emphasis", "warning-text-emphasis", "info-text-emphasis", "light-text-emphasis", "dark-text-emphasis", 
+            // Background subtle
+            "primary-bg-subtle", "secondary-bg-subtle", "tertiary-bg-subtle", "invert-bg-subtle", "brand-bg-subtle", "error-bg-subtle", "success-bg-subtle", "warning-bg-subtle", "info-bg-subtle", "light-bg-subtle", "dark-bg-subtle", 
+            // Border subtle
+            "primary-border-subtle", "secondary-border-subtle", "success-border-subtle", "error-border-subtle", "warning-border-subtle", "info-border-subtle", "brand-border-subtle", "light-border-subtle", "dark-border-subtle", 
+            // Hover states
+            "primary-hover", "secondary-hover", "light-hover", "dark-hover", "error-hover", "success-hover", "warning-hover", "info-hover", 
+            // Gradients
+            "primary-gradient", "secondary-gradient", "light-gradient", "dark-gradient", "success-gradient", "info-gradient", "warning-gradient", "error-gradient", "gradient" ]
+        },
+        typography: {
+            label: "Typography",
+            tokens: [ "font-sans-serif", "font-monospace", "body-font-family", "body-font-size", "body-font-weight", "body-line-height", "body-color", "body-bg", "heading-color", "font-size-xl", "font-size-2xl", "display-1", "font-weight-light", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "font-weight-bold", "font-weight-heavy", "font-weight-black", "line-height-base", "line-height-sm", "line-height-lg", "letter-spacing-h1", "letter-spacing-h2", "letter-spacing-h3", "letter-spacing-h4", "letter-spacing-h5", "letter-spacing-h6", "link-color", "link-color-rgb", "link-decoration", "link-hover-color", "link-hover-color-rgb", "highlight-bg", "code-color" ]
+        },
+        spacing: {
+            label: "Spacing",
+            tokens: [ "spacing-0", "spacing-1", "spacing-px-6", "spacing-2", "spacing-px-10", "spacing-3", "spacing-px-14", "spacing-4", "spacing-5", "spacing-px-22", "spacing-6", "spacing-7", "spacing-px-30", "spacing-8", "spacing-9", "spacing-10", "spacing-11", "spacing-12", "spacing-14", "spacing-16", "spacing-20", "spacing-24", "spacing-28", "spacing-32", "spacing-36", "spacing-40", "spacing-44", "spacing-48", "spacing-52", "spacing-56", "spacing-60", "spacing-64", "spacing-72", "spacing-80", "spacing-90", "spacing-200" ]
+        },
+        shadows: {
+            label: "Shadows",
+            tokens: [ "box-shadow", "box-shadow-xs", "box-shadow-sm", "box-shadow-lg", "box-shadow-xl", "box-shadow-inset" ]
+        },
+        borders: {
+            label: "Borders",
+            tokens: [ "border-width", "border-style", "border-color", "border-color-translucent", "border-radius", "border-radius-sm", "border-radius-lg", "border-radius-xl", "border-radius-xxl", "border-radius-2xl", "border-radius-3xl", "border-radius-4xl", "border-radius-pill", "focus-border-color", "focus-ring-width", "focus-ring-offset", "focus-ring-opacity", "form-valid-color", "form-valid-border-color", "form-invalid-color", "form-invalid-border-color" ]
+        },
+        transitions: {
+            label: "Transitions",
+            tokens: [ "transition-duration-fast", "transition-duration-base", "transition-duration-slow", "transition-duration-slower", "easing-base", "easing-ease-in-out", "easing-ease-out", "easing-ease-in", "easing-ease-linear", "transition-fast", "transition-base", "transition-slow" ]
+        },
+        zindex: {
+            label: "Z-Index",
+            tokens: [ "z-n1", "z-0", "z-1", "z-2", "z-3", "z-4", "z-5", "z-dropdown", "z-sticky", "z-fixed", "z-modal", "z-popover", "z-tooltip", "z-drawer" ]
+        },
+        breakpoints: {
+            label: "Breakpoints",
+            tokens: [ "breakpoint-xs", "breakpoint-sm", "breakpoint-md", "breakpoint-lg", "breakpoint-xl", "breakpoint-xxl" ]
+        }
+    };
+    // Update token value
+        return jsxs("div", {
+        className: `design-tokens-customizer ${className || ""}`,
+        style: style,
+        children: [ jsxs("div", {
+            className: "customizer-header",
+            children: [ jsx("h2", {
+                children: "Interactive Theme Customizer"
+            }), jsxs("div", {
+                className: "customizer-controls",
+                children: [ jsxs("select", {
+                    value: colorFormat,
+                    onChange: e => setColorFormat(e.target.value),
+                    children: [ jsx("option", {
+                        value: "hex",
+                        children: "HEX"
+                    }), jsx("option", {
+                        value: "rgb",
+                        children: "RGB"
+                    }), jsx("option", {
+                        value: "rgba",
+                        children: "RGBA"
+                    }), jsx("option", {
+                        value: "hsl",
+                        children: "HSL"
+                    }), jsx("option", {
+                        value: "hsla",
+                        children: "HSLA"
+                    }) ]
+                }), jsx("button", {
+                    onClick: resetToDefaults,
+                    children: "Reset to Defaults"
+                }), jsxs("label", {
+                    className: "file-input-button",
+                    children: [ "Load Tokens", jsx("input", {
+                        type: "file",
+                        accept: ".json",
+                        onChange: loadTokensFromFile,
+                        style: {
+                            display: "none"
+                        }
+                    }) ]
+                }), jsx("button", {
+                    onClick: copyToClipboard,
+                    children: "Copy Tokens"
+                }), jsx("button", {
+                    onClick: exportTokens,
+                    children: "Export Tokens"
+                }), jsx("button", {
+                    onClick: exportTheme,
+                    children: "Export Theme CSS"
+                }) ]
+            }) ]
+        }), jsxs("div", {
+            className: "customizer-content",
+            children: [ jsx("div", {
+                className: "customizer-sidebar",
+                children: Object.entries(tokenCategories).map((([key, category]) => jsx("button", {
+                    className: "category-button " + (activeCategory === key ? "active" : ""),
+                    onClick: () => setActiveCategory(key),
+                    children: category.label
+                }, key)))
+            }), jsxs("div", {
+                className: "customizer-editor",
+                children: [ jsx("h3", {
+                    children: tokenCategories[activeCategory].label
+                }), jsx("div", {
+                    className: "tokens-grid",
+                    children: tokenCategories[activeCategory].tokens.map((tokenKey => {
+                        var _context;
+                        const value = tokens[tokenKey] || "", isColor = _includesInstanceProperty(tokenKey).call(tokenKey, "color") || _includesInstanceProperty(tokenKey).call(tokenKey, "bg") || _includesInstanceProperty(tokenKey).call(tokenKey, "gradient") || _includesInstanceProperty(_context = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context, tokenKey) || tokenKey.match(/^(gray|primary|red|green|blue|yellow)-\d+$/);
+                        return jsxs("div", {
+                            className: "token-item",
+                            children: [ jsx("label", {
+                                children: tokenKey
+                            }), isColor ? jsxs("div", {
+                                className: "color-input-group",
+                                children: [ jsx("input", {
+                                    type: "color",
+                                    value: value.startsWith("#") ? value : convertColorFormat(value, "hex"),
+                                    onChange: e => updateToken(tokenKey, e.target.value)
+                                }), jsx("input", {
+                                    type: "text",
+                                    value: convertColorFormat(value, colorFormat),
+                                    onChange: e => {
+                                        const converted = convertColorFormat(e.target.value, "hex");
+                                        updateToken(tokenKey, converted);
+                                    }
+                                }) ]
+                            }) : jsx("input", {
+                                type: "text",
+                                value: value,
+                                onChange: e => updateToken(tokenKey, e.target.value)
+                            }) ]
+                        }, tokenKey);
+                    }))
+                }) ]
+            }), jsxs("div", {
+                className: "customizer-preview",
+                children: [ jsx("h3", {
+                    children: "Live Preview"
+                }), jsx("style", {
+                    children: cssPreview
+                }), jsx(ThemePreview, {
+                    theme: previewTheme,
+                    showDetails: !1,
+                    showPalette: !0,
+                    showTypography: !0,
+                    showSpacing: !0
+                }) ]
+            }) ]
+        }), jsx("style", {
+            children: "\n        .design-tokens-customizer {\n          display: flex;\n          flex-direction: column;\n          height: 100vh;\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        .customizer-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 16px 24px;\n          border-bottom: 1px solid #e0e0e0;\n          background: #f5f5f5;\n        }\n\n        .customizer-header h2 {\n          margin: 0;\n          font-size: 24px;\n          color: #333;\n        }\n\n        .customizer-controls {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n        }\n\n        .customizer-controls select,\n        .customizer-controls button {\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          background: white;\n          cursor: pointer;\n        }\n\n        .customizer-controls button:hover,\n        .file-input-button:hover {\n          background: #f0f0f0;\n        }\n\n        .file-input-button {\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          background: white;\n          cursor: pointer;\n          font-size: 14px;\n          display: inline-block;\n        }\n\n        .customizer-content {\n          display: flex;\n          flex: 1;\n          overflow: hidden;\n        }\n\n        .customizer-sidebar {\n          width: 200px;\n          border-right: 1px solid #e0e0e0;\n          padding: 16px;\n          background: #fafafa;\n          overflow-y: auto;\n        }\n\n        .category-button {\n          display: block;\n          width: 100%;\n          padding: 12px;\n          margin-bottom: 8px;\n          border: none;\n          background: white;\n          border-radius: 4px;\n          cursor: pointer;\n          text-align: left;\n          font-size: 14px;\n        }\n\n        .category-button:hover,\n        .category-button.active {\n          background: #e0e0e0;\n        }\n\n        .customizer-editor {\n          flex: 1;\n          padding: 24px;\n          overflow-y: auto;\n        }\n\n        .customizer-editor h3 {\n          margin-top: 0;\n          margin-bottom: 16px;\n          color: #333;\n        }\n\n        .tokens-grid {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n          gap: 16px;\n        }\n\n        .token-item {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n\n        .token-item label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #666;\n        }\n\n        .color-input-group {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n        }\n\n        .color-input-group input[type=\"color\"] {\n          width: 50px;\n          height: 40px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          cursor: pointer;\n        }\n\n        .color-input-group input[type=\"text\"],\n        .token-item input[type=\"text\"] {\n          flex: 1;\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-size: 14px;\n          font-family: 'Monaco', 'Menlo', monospace;\n        }\n\n        .customizer-preview {\n          width: 400px;\n          border-left: 1px solid #e0e0e0;\n          padding: 24px;\n          overflow-y: auto;\n          background: #fafafa;\n        }\n\n        .customizer-preview h3 {\n          margin-top: 0;\n          margin-bottom: 16px;\n          color: #333;\n        }\n      "
+        }) ]
+    });
 };
 
+/**
+ * Design Tokens Customizer Component
+ */
 /**
  * Theme Adapter
  *
@@ -23073,7 +23656,8 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
  *
  * @param tokens - DesignTokens object
  * @returns CSS variables object compatible with Theme.cssVars
- */ function designTokensToCSSVars(tokens) {
+ */
+function designTokensToCSSVars(tokens) {
     const cssVars = {};
     return Object.entries(tokens).forEach((([key, value]) => {
         void 0 !== value && (cssVars[`--atomix-${key}`] = String(value));
@@ -23327,6 +23911,7 @@ class RTLManager {
 
 const themeImport =  Object.freeze( Object.defineProperty({
     __proto__: null,
+    DesignTokensCustomizer: DesignTokensCustomizer,
     RTLManager: RTLManager,
     ThemeApplicator: ThemeApplicator,
     ThemeComparator: ThemeComparator,
@@ -23914,20 +24499,53 @@ function quickTheme(name, primaryColor, secondaryColor) {
 /**
  * Create a dark theme variant from a light theme
  */ function createDarkVariant(lightTheme) {
-    return extendTheme(lightTheme, {
+    // We'll extend the theme by merging the new properties with the existing theme
+    const darkVariant = {
         name: `${lightTheme.name} Dark`,
         palette: {
             mode: "dark",
+            primary: lightTheme.palette?.primary,
+            // Preserve original primary
+            secondary: lightTheme.palette?.secondary,
+            // Preserve original secondary
+            error: lightTheme.palette?.error,
+            // Preserve original error
+            warning: lightTheme.palette?.warning,
+            // Preserve original warning
+            info: lightTheme.palette?.info,
+            // Preserve original info
+            success: lightTheme.palette?.success,
+            // Preserve original success
             background: {
                 default: "#121212",
+                paper: "#1e1e1e",
+                // Added missing paper property
                 subtle: "#1e1e1e"
             },
             text: {
                 primary: "#ffffff",
-                secondary: "rgba(255, 255, 255, 0.7)"
+                secondary: "rgba(255, 255, 255, 0.7)",
+                disabled: "rgba(255, 255, 255, 0.38)"
             }
         }
-    });
+    };
+    // Create a new theme by extending the light theme with the dark variant
+        return {
+        ...lightTheme,
+        ...darkVariant,
+        palette: {
+            ...lightTheme.palette,
+            ...darkVariant.palette,
+            background: {
+                ...lightTheme.palette?.background,
+                ...darkVariant.palette?.background
+            },
+            text: {
+                ...lightTheme.palette?.text,
+                ...darkVariant.palette?.text
+            }
+        }
+    };
 }
 
 /**
@@ -24003,5 +24621,5 @@ const atomix = {
     types: types
 };
 
-export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GLASS_CONTAINER, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, importTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, sliderConstants, supportsDarkMode, theme, themePropertyToCSSVar, themeToCSS, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils, validateTheme };
+export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DesignTokensCustomizer, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, importTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, sliderConstants, supportsDarkMode, theme, themePropertyToCSSVar, themeToCSS, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useCard, useChartData, useChartInteraction, useChartScale, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils, validateTheme };
 //# sourceMappingURL=index.esm.js.map