@shohojdhara/atomix 0.3.12 → 0.3.14

package/dist/index.js

@@ -73,7 +73,7 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
     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"
     }
@@ -1604,7 +1604,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,
@@ -1848,7 +1853,13 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
-const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
+const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount));
+
+// Module-level counter for deterministic ID generation
+let idCounter = 0;
+
+// Module-level shared shader cache with LRU eviction
+const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
 }, globalMousePosition: globalMousePosition = {
@@ -1859,10 +1870,8 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
     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) => {
     // Generate a stable, deterministic ID for SSR compatibility
-    // Use a counter-based approach to avoid hydration mismatches
-    const [filterId] = React.useState((() => 
-    // Use a simple counter for deterministic IDs
-    "undefined" == typeof window ? `atomix-glass-filter-ssr-${Math.random().toString(36).substring(2, 11)}` : `atomix-glass-filter-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`)), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
+    // Use a module-level counter that's consistent across server and client
+    const filterId = React.useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     React.useEffect((() => {
         "shader" === mode ? 
@@ -1905,9 +1914,9 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
-                    });
-                    // Use requestIdleCallback if available for non-blocking generation
-                    const generate = () => {
+                    }), 
+                    // Defer shader generation with longer delay to avoid blocking
+                    setTimeout((() => {
                         const url = shaderGeneratorRef.current?.updateShader() || "";
                         ((key, url) => {
                             // Evict oldest entries if at capacity
@@ -1926,20 +1935,15 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
                             // Development mode: log cache size
                             "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
                         })(cacheKey, url), setShaderMapUrl(url);
-                    };
-                    "undefined" != typeof requestIdleCallback ? requestIdleCallback(generate, {
-                        timeout: 1e3
-                    }) : 
-                    // Fallback to setTimeout for browsers without requestIdleCallback
-                    setTimeout(generate, 0);
+                    }), 100);
                 } catch (error) {
                     console.warn("AtomixGlassContainer: Error generating shader map", error), setShaderMapUrl("");
                 } else 
                 // Shader utils not loaded yet, retry after a short delay
                 shaderDebounceTimeoutRef.current = setTimeout(generateShader, 100);
             };
-            // Debounce with 300ms delay
-                        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 300);
+            // Debounce with 500ms delay to reduce frequency
+                        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 500);
         } else 
         // Not in shader mode, clear URL
         setShaderMapUrl("");
@@ -2006,7 +2010,7 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ filterId, liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = React.useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = React.useMemo((() => {
         try {
             // Safe extraction of mouse offset values
             const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
@@ -2095,7 +2099,6 @@ const GlassFilter =  React.memo(GlassFilterComponent, ((prevProps, nextProps) =>
     });
 }));
 
-// Module-level shared shader cache with LRU eviction
 AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
@@ -2843,14 +2846,16 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     });
 }
 
-const Accordion =  React.memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
+const Accordion =  React.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 = React.useId(), buttonId = `accordion-header-${instanceId}`, panelId = `accordion-panel-${instanceId}`, {state: state, toggle: toggle, updatePanelHeight: updatePanelHeight, panelRef: panelRef, contentRef: contentRef, generateClassNames: generateClassNames, generateHeaderClassNames: generateHeaderClassNames} = useAccordion({
         defaultOpen: defaultOpen,
         disabled: disabled,
         iconPosition: iconPosition,
         isOpen: controlledOpen,
-        onOpenChange: onOpenChange
+        onOpenChange: onOpenChange,
+        onOpen: onOpen,
+        onClose: onClose
     }), defaultIcon = jsxRuntime.jsx("i", {
         className: "c-accordion__icon",
         "aria-hidden": "true",
@@ -3337,7 +3342,7 @@ function useBadge(initialProps) {
 
 AvatarGroup.displayName = "AvatarGroup";
 
-const Badge =  React.memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, className: className = "", glass: glass, style: style}) => {
+const Badge =  React.memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, onRemove: onRemove, "aria-label": ariaLabel, className: className = "", glass: glass, style: style}) => {
     const {generateBadgeClass: generateBadgeClass} = useBadge({
         variant: variant,
         size: size,
@@ -3350,6 +3355,7 @@ const Badge =  React.memo((({label: label, variant: variant = "primary", size: s
     }), badgeElement = jsxRuntime.jsxs("span", {
         className: badgeClass,
         "aria-disabled": disabled,
+        "aria-label": ariaLabel,
         ref: ref,
         style: style,
         children: [ icon && jsxRuntime.jsx("span", {
@@ -3357,6 +3363,13 @@ const Badge =  React.memo((({label: label, variant: variant = "primary", size: s
             children: icon
         }), jsxRuntime.jsx("span", {
             children: label
+        }), onRemove && jsxRuntime.jsx("button", {
+            type: "button",
+            className: "c-badge__close",
+            onClick: onRemove,
+            "aria-label": "Remove badge",
+            disabled: disabled,
+            children: "×"
         }) ]
     });
     if (glass) {
@@ -3484,7 +3497,7 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb =  React.memo((({items: items, divider: divider, className: className = "", ariaLabel: ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const Breadcrumb =  React.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 jsxRuntime.jsx("nav", {
         "aria-label": ariaLabel,
@@ -3587,7 +3600,7 @@ function useButton(initialProps) {
 
 Breadcrumb.displayName = "Breadcrumb";
 
-const Spinner =  React.memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass}) => {
+const Spinner =  React.memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status"}) => {
     const {generateSpinnerClass: generateSpinnerClass} = useSpinner({
         size: size,
         variant: variant,
@@ -3600,10 +3613,11 @@ const Spinner =  React.memo((({size: size = "md", variant: variant = "primary",
     }), spinnerContent = jsxRuntime.jsx("div", {
         className: spinnerClass,
         style: style,
-        role: "status",
+        role: role,
+        "aria-label": ariaLabel || "Loading",
         children: jsxRuntime.jsx("span", {
             className: SPINNER.VISUALLY_HIDDEN,
-            children: "Loading..."
+            children: ariaLabel || "Loading..."
         })
     });
     if (glass) {
@@ -3655,7 +3669,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
@@ -3716,7 +3730,7 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "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 ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -4245,7 +4259,7 @@ var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeO
 /**
  * Callout component for displaying important messages, notifications, or alerts
  */
-const Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, oneLine: oneLine = !1, toast: toast = !1, glass: glass, className: className, style: style, ...props}) => {
+const 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
@@ -4256,8 +4270,8 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
         // Default callout properties
         const defaultProps = {
             variant: "primary",
-            oneLine: !1,
-            toast: !1,
+            compact: !1,
+            isToast: !1,
             glass: !1,
             ...initialProps
         };
@@ -4268,8 +4282,8 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
    */        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();
@@ -4277,8 +4291,8 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
         };
     }({
         variant: variant,
-        oneLine: oneLine,
-        toast: toast,
+        compact: compact,
+        isToast: isToast,
         glass: glass,
         className: className,
         style: style
@@ -4288,7 +4302,7 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
             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 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -4334,8 +4348,8 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
         return jsxRuntime.jsx("div", {
             className: generateCalloutClass({
                 variant: variant,
-                oneLine: oneLine,
-                toast: toast,
+                compact: compact,
+                isToast: isToast,
                 glass: glass,
                 className: className
             }),
@@ -4357,8 +4371,8 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
     return jsxRuntime.jsx("div", {
         className: generateCalloutClass({
             variant: variant,
-            oneLine: oneLine,
-            toast: toast,
+            compact: compact,
+            isToast: isToast,
             glass: glass,
             className: className
         }),
@@ -4385,7 +4399,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
@@ -5933,7 +5947,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         tabIndex: 0,
         ...props,
         children: [ (title || subtitle || showToolbar) && jsxRuntime.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: [ jsxRuntime.jsxs("div", {
                 className: `${CHART.HEADER_CONTENT_CLASS} u-flex-1`,
                 children: [ title && jsxRuntime.jsx("h3", {
@@ -9247,7 +9261,7 @@ const range = (start, end) => {
             "aria-hidden": "true"
         })
     })
-}))), Pagination =  React.memo((({currentPage: currentPage = PAGINATION_DEFAULTS.currentPage, totalPages: totalPages = PAGINATION_DEFAULTS.totalPages, onPageChange: onPageChange, siblingCount: siblingCount = PAGINATION_DEFAULTS.siblingCount, showFirstLastButtons: showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons, showPrevNextButtons: showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons, showSearch: showSearch = !1, searchPlaceholder: searchPlaceholder = "Go to page", size: size = PAGINATION_DEFAULTS.size, className: className = "", style: style, ariaLabel: ariaLabel = "Pagination", glass: glass}) => {
+}))), Pagination =  React.memo((({currentPage: currentPage = PAGINATION_DEFAULTS.currentPage, totalPages: totalPages = PAGINATION_DEFAULTS.totalPages, onPageChange: onPageChange, siblingCount: siblingCount = PAGINATION_DEFAULTS.siblingCount, showFirstLastButtons: showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons, showPrevNextButtons: showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons, 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,
@@ -9414,7 +9428,7 @@ function useCheckbox(initialProps) {
 
 /**
  * Checkbox - A component for checkbox inputs
- */ const Checkbox =  React.memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+ */ const Checkbox =  React.memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass}) => {
     const {generateCheckboxClass: generateCheckboxClass, checkboxRef: checkboxRef} = useCheckbox({
         indeterminate: indeterminate,
         disabled: disabled,
@@ -9435,6 +9449,7 @@ function useCheckbox(initialProps) {
             className: "c-checkbox__input",
             checked: checked,
             onChange: onChange,
+            onClick: onClick,
             disabled: disabled,
             required: required,
             id: id,
@@ -9732,7 +9747,7 @@ const DataTable =  React.memo((({data: data, columns: columns, className: classN
     }), []), handleDrop = React.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 = React.useCallback((format => {
@@ -10042,7 +10057,7 @@ const DataTable =  React.memo((({data: data, columns: columns, className: classN
                 showFirstLastButtons: !0,
                 showPrevNextButtons: !0,
                 size: "sm",
-                ariaLabel: "Data table pagination",
+                "aria-label": "Data table pagination",
                 className: "c-data-table__pagination"
             })
         }) ]
@@ -11026,7 +11041,7 @@ function useInput(initialProps) {
  * Input - A component for text input fields
  */ FormGroup.displayName = "FormGroup";
 
-const Input =  React.memo( React.forwardRef((({type: type = "text", value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Input =  React.memo( React.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,
@@ -11046,6 +11061,7 @@ const Input =  React.memo( React.forwardRef((({type: type = "text", value: value
         type: type,
         className: inputClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,
@@ -11300,7 +11316,7 @@ function useHero(initialProps) {
         backdrop: !1,
         closeOnOutsideClick: !0,
         closeOnEscape: !0,
-        ariaLabel: "Main navigation",
+        "aria-label": "Main navigation",
         ...initialProps
     }, [isExpanded, setIsExpanded] = React.useState(defaultProps.expanded || !1);
     // Local expanded state for when not controlled externally
@@ -12100,7 +12116,7 @@ const DEFAULT_ATOMIX_FONTS = [ {
             items: [],
             divider: BREADCRUMB.DEFAULTS.DIVIDER,
             className: "",
-            ariaLabel: "Breadcrumb",
+            "aria-label": "Breadcrumb",
             ...initialOptions
         },
         generateBreadcrumbClass: options => {
@@ -12433,21 +12449,21 @@ function useSlider(options) {
     const [interaction, setInteraction] = React.useState({
         hoveredIndex: null,
         selectedIndex: null
-    }), handlePointHover = React.useCallback((index => {
-        setInteraction((prev => ({
-            ...prev,
-            hoveredIndex: index
-        })));
-    }), []), handlePointClick = React.useCallback((index => {
-        setInteraction((prev => ({
-            ...prev,
-            selectedIndex: prev.selectedIndex === index ? null : index
-        })));
-    }), []);
+    });
     return {
         interaction: interaction,
-        handlePointHover: handlePointHover,
-        handlePointClick: handlePointClick,
+        handlePointHover: React.useCallback((index => {
+            setInteraction((prev => ({
+                ...prev,
+                hoveredIndex: index
+            })));
+        }), []),
+        handlePointClick: React.useCallback((index => {
+            setInteraction((prev => ({
+                ...prev,
+                selectedIndex: prev.selectedIndex === index ? null : index
+            })));
+        }), []),
         clearInteraction: React.useCallback((() => {
             setInteraction({
                 hoveredIndex: null,
@@ -12501,7 +12517,7 @@ var composablesImport =  Object.freeze({
 
 /**
  * Select - A component for dropdown selection
- */ const Select =  React.memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+ */ const Select =  React.memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateSelectClass: generateSelectClass} = useSelect({
         size: size,
         disabled: disabled,
@@ -12647,7 +12663,7 @@ Select.displayName = "Select";
 /**
  * Radio - A component for radio button inputs
  */
-const Radio =  React.memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+const Radio =  React.memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateRadioClass: generateRadioClass} = useRadio({
         disabled: disabled,
         invalid: invalid,
@@ -12705,7 +12721,7 @@ Radio.displayName = "Radio";
 /**
  * Textarea - A component for multiline text input
  */
-const Textarea =  React.memo( React.forwardRef((({value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Textarea =  React.memo( React.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,
@@ -12723,6 +12739,7 @@ const Textarea =  React.memo( React.forwardRef((({value: value, onChange: onChan
         ref: ref,
         className: textareaClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,
@@ -14271,7 +14288,7 @@ NavItem.displayName = "NavItem";
  * </Navbar>
  * ```
  */
-const Navbar =  React.forwardRef((({brand: brand, children: children, variant: variant, position: position = "static", containerWidth: containerWidth, collapsible: collapsible = !0, expanded: expanded, onToggle: onToggle, className: className = "", style: style, disabled: disabled = !1, backdrop: backdrop = !1, closeOnOutsideClick: closeOnOutsideClick = !0, closeOnEscape: closeOnEscape = !0, ariaLabel: ariaLabel = "Main navigation", id: id, glass: glass}, ref) => {
+const Navbar =  React.forwardRef((({brand: brand, children: children, variant: variant, position: position = "static", containerWidth: containerWidth, collapsible: collapsible = !0, expanded: expanded, onToggle: onToggle, className: className = "", style: style, disabled: disabled = !1, backdrop: backdrop = !1, closeOnOutsideClick: closeOnOutsideClick = !0, closeOnEscape: closeOnEscape = !0, "aria-label": ariaLabel = "Main navigation", id: id, glass: glass}, ref) => {
     const {generateNavbarClass: generateNavbarClass, generateContainerStyle: generateContainerStyle, generateCollapseClass: generateCollapseClass} = useNavbar({
         position: position,
         collapsible: collapsible,
@@ -16355,7 +16372,7 @@ const PopoverContext =  React.createContext({
 /**
  * Hook for managing rating component state and interactions
  */
-const Rating =  React.forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", color: color, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
+const Rating =  React.forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", variant: variant, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
     const internalRef = React.useRef(null), ratingInstance = React.useRef(null), {currentValue: currentValue, hoverValue: hoverValue, focusedIndex: focusedIndex, setHoverValue: setHoverValue, setFocused: setFocused, handleKeyDown: handleKeyDown} = (({value: value = 0, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, onChange: onChange}) => {
         // Determine if component is in controlled mode
         const isControlled = void 0 !== onChange, [internalValue, setInternalValue] = React.useState(value), [hoverValue, setHoverValue] = React.useState(null), [focusedIndex, setFocusedIndex] = React.useState(null), currentValue = isControlled ? value : internalValue, handleMouseEnter = React.useCallback((starValue => {
@@ -16450,7 +16467,7 @@ const Rating =  React.forwardRef((({value: valueProp = 0, defaultValue: defaultV
         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
     React.useEffect((() => {
         useVanillaJS && ratingInstance.current && ratingInstance.current.updateOptions({
@@ -16459,11 +16476,11 @@ const Rating =  React.forwardRef((({value: valueProp = 0, defaultValue: defaultV
             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 jsxRuntime.jsx("div", {
         className: ratingClasses,
@@ -16487,7 +16504,7 @@ const Rating =  React.forwardRef((({value: valueProp = 0, defaultValue: defaultV
             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(jsxRuntime.jsx("div", {
                     id: starId,
                     className: starClass,
@@ -16567,8 +16584,8 @@ const Rating =  React.forwardRef((({value: valueProp = 0, defaultValue: defaultV
  * <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
@@ -16642,7 +16659,7 @@ const ProductReview = ({productName: productName, productImage: productImage, in
                         allowHalf: allowHalf,
                         maxValue: maxRating,
                         size: "lg",
-                        color: ratingColor
+                        variant: ratingColor
                     }), jsxRuntime.jsx("span", {
                         className: "c-rating__value",
                         children: rating > 0 ? rating.toFixed(1) : "Select a rating"
@@ -16680,7 +16697,7 @@ ProductReview.displayName = "ProductReview";
 /**
  * Hook for managing Progress component state and behavior
  */
-const Progress =  React.memo( React.forwardRef((({value: value, variant: variant = "primary", size: size = "md", className: className = "", style: style, disabled: disabled = !1, ariaLabel: ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL, glass: glass}, ref) => {
+const Progress =  React.memo( React.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";
@@ -17370,28 +17387,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] = React.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] = React.useState(defaultChecked), isChecked = isControlled ? controlledChecked : internalChecked, handleClick = React.useCallback((() => {
         if (disabled) return;
-        const newState = !isOn;
-        setIsOn(newState), newState ? onToggleOn && onToggleOn() : onToggleOff && onToggleOff();
-    }, toggleContent = jsxRuntime.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 = jsxRuntime.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: jsxRuntime.jsx("div", {
             className: "c-toggle__switch"
         })
     });
-    // Handle toggle click
-        if (glass) {
+    if (glass) {
         // Default glass settings for toggles
         const defaultGlassProps = {
             displacementScale: 60,
@@ -17537,7 +17555,7 @@ const Tooltip =  React.memo((({content: content, children: children, position: p
         delay: delay
     });
     return jsxRuntime.jsxs("div", {
-        className: "u-position-relative u-d-inline-block",
+        className: "u-position-relative u-inline-block",
         style: style,
         ...wrapperProps,
         children: [ jsxRuntime.jsx("div", {
@@ -19192,6 +19210,14 @@ const defaultTokens = {
     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 = {}));
@@ -19493,27 +19519,6 @@ class ThemeLogger {
     return Object.keys(registry).length;
 }
 
-/**
- * Core Theme Engine
- *
- * Core theme creation, composition, and registry functionality
- */ var index =  Object.freeze({
-    __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
-});
-
 /**
  * CSS Injection Utilities
  *
@@ -19684,7 +19689,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),
@@ -19704,7 +19709,7 @@ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof do
  * 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;
@@ -19734,7 +19739,7 @@ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof do
  * @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));
@@ -19747,7 +19752,7 @@ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof do
  * @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));
@@ -19760,7 +19765,7 @@ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof do
  * @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))})`;
@@ -19779,7 +19784,7 @@ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof do
  */
 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
@@ -19825,7 +19830,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) {
@@ -19908,11 +19913,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";
@@ -20370,17 +20375,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 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}) => {
+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
+ */
+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 = React.useRef(onThemeChange), onErrorRef = React.useRef(onError);
     // Update ref when callback changes
@@ -20401,12 +20681,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] = React.useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = React.useState((() => 
-    // If defaultTheme is DesignTokens, store them
-    defaultTheme && "string" != typeof defaultTheme ? createTokens(defaultTheme) : null)), [isLoading, setIsLoading] = React.useState(!1), [error, setError] = React.useState(null), loadedThemesRef = React.useRef(new Set), themePromisesRef = React.useRef({}), abortControllerRef = React.useRef(null);
+        }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = React.useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = React.useState((() => {
+        // If defaultTheme is DesignTokens, validate and store them
+        if (defaultTheme && "string" != typeof defaultTheme) {
+            const {tokens: tokens, validation: validation} = validateAndMergeTokens(defaultTheme);
+            return validation.valid ? tokens : (logger.warn("Invalid default theme tokens, using defaults", {
+                errors: validation.errors,
+                warnings: validation.warnings
+            }), createTokens({}));
+        }
+        return null;
+    })), [isLoading, setIsLoading] = React.useState(!1), [error, setError] = React.useState(null), loadedThemesRef = React.useRef(new Set), themePromisesRef = React.useRef({}), abortControllerRef = React.useRef(null);
     // Handle initial DesignTokens defaultTheme
     React.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
     React.useEffect((() => {
@@ -20436,21 +20724,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((function() {
-                    return 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
@@ -20465,32 +20774,35 @@ 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((function() {
-                                return 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((function() {
+                                    return 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 {
@@ -20555,6 +20867,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
  *
@@ -20580,7 +20903,8 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
  *   );
  * }
  * ```
- */ function useTheme() {
+ */
+function useTheme() {
     const context = React.useContext(ThemeContext);
     if (!context) throw new Error("useTheme must be used within a ThemeProvider");
     return {
@@ -22597,8 +22921,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),
@@ -22783,43 +23107,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;
@@ -23145,8 +23471,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] = React.useState((() => createTokens(initialTokens))), [colorFormat, setColorFormat] = React.useState("hex"), [activeCategory, setActiveCategory] = React.useState("colors"), [cssPreview, setCssPreview] = React.useState("");
+    // Generate CSS when tokens change
+    React.useEffect((() => {
+        const css = createTheme(tokens, {
+            selector: ":root",
+            prefix: "atomix-preview"
+        });
+        setCssPreview(css), onTokensChange?.(tokens);
+    }), [ tokens, onTokensChange ]);
+    // Create theme object for preview
+    const previewTheme = React.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 = React.useCallback(((key, value) => {
+        setTokens((prev => ({
+            ...prev,
+            [key]: value
+        })));
+    }), []), convertColorFormat = React.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 = React.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 = React.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 = React.useCallback((() => {
+        navigator.clipboard?.writeText(JSON.stringify(tokens, null, 2));
+    }), [ tokens ]), resetToDefaults = React.useCallback((() => {
+        setTokens(defaultTokens);
+    }), []), loadTokensFromFile = React.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 jsxRuntime.jsxs("div", {
+        className: `design-tokens-customizer ${className || ""}`,
+        style: style,
+        children: [ jsxRuntime.jsxs("div", {
+            className: "customizer-header",
+            children: [ jsxRuntime.jsx("h2", {
+                children: "Interactive Theme Customizer"
+            }), jsxRuntime.jsxs("div", {
+                className: "customizer-controls",
+                children: [ jsxRuntime.jsxs("select", {
+                    value: colorFormat,
+                    onChange: e => setColorFormat(e.target.value),
+                    children: [ jsxRuntime.jsx("option", {
+                        value: "hex",
+                        children: "HEX"
+                    }), jsxRuntime.jsx("option", {
+                        value: "rgb",
+                        children: "RGB"
+                    }), jsxRuntime.jsx("option", {
+                        value: "rgba",
+                        children: "RGBA"
+                    }), jsxRuntime.jsx("option", {
+                        value: "hsl",
+                        children: "HSL"
+                    }), jsxRuntime.jsx("option", {
+                        value: "hsla",
+                        children: "HSLA"
+                    }) ]
+                }), jsxRuntime.jsx("button", {
+                    onClick: resetToDefaults,
+                    children: "Reset to Defaults"
+                }), jsxRuntime.jsxs("label", {
+                    className: "file-input-button",
+                    children: [ "Load Tokens", jsxRuntime.jsx("input", {
+                        type: "file",
+                        accept: ".json",
+                        onChange: loadTokensFromFile,
+                        style: {
+                            display: "none"
+                        }
+                    }) ]
+                }), jsxRuntime.jsx("button", {
+                    onClick: copyToClipboard,
+                    children: "Copy Tokens"
+                }), jsxRuntime.jsx("button", {
+                    onClick: exportTokens,
+                    children: "Export Tokens"
+                }), jsxRuntime.jsx("button", {
+                    onClick: exportTheme,
+                    children: "Export Theme CSS"
+                }) ]
+            }) ]
+        }), jsxRuntime.jsxs("div", {
+            className: "customizer-content",
+            children: [ jsxRuntime.jsx("div", {
+                className: "customizer-sidebar",
+                children: Object.entries(tokenCategories).map((([key, category]) => jsxRuntime.jsx("button", {
+                    className: "category-button " + (activeCategory === key ? "active" : ""),
+                    onClick: () => setActiveCategory(key),
+                    children: category.label
+                }, key)))
+            }), jsxRuntime.jsxs("div", {
+                className: "customizer-editor",
+                children: [ jsxRuntime.jsx("h3", {
+                    children: tokenCategories[activeCategory].label
+                }), jsxRuntime.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 jsxRuntime.jsxs("div", {
+                            className: "token-item",
+                            children: [ jsxRuntime.jsx("label", {
+                                children: tokenKey
+                            }), isColor ? jsxRuntime.jsxs("div", {
+                                className: "color-input-group",
+                                children: [ jsxRuntime.jsx("input", {
+                                    type: "color",
+                                    value: value.startsWith("#") ? value : convertColorFormat(value, "hex"),
+                                    onChange: e => updateToken(tokenKey, e.target.value)
+                                }), jsxRuntime.jsx("input", {
+                                    type: "text",
+                                    value: convertColorFormat(value, colorFormat),
+                                    onChange: e => {
+                                        const converted = convertColorFormat(e.target.value, "hex");
+                                        updateToken(tokenKey, converted);
+                                    }
+                                }) ]
+                            }) : jsxRuntime.jsx("input", {
+                                type: "text",
+                                value: value,
+                                onChange: e => updateToken(tokenKey, e.target.value)
+                            }) ]
+                        }, tokenKey);
+                    }))
+                }) ]
+            }), jsxRuntime.jsxs("div", {
+                className: "customizer-preview",
+                children: [ jsxRuntime.jsx("h3", {
+                    children: "Live Preview"
+                }), jsxRuntime.jsx("style", {
+                    children: cssPreview
+                }), jsxRuntime.jsx(ThemePreview, {
+                    theme: previewTheme,
+                    showDetails: !1,
+                    showPalette: !0,
+                    showTypography: !0,
+                    showSpacing: !0
+                }) ]
+            }) ]
+        }), jsxRuntime.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
  *
@@ -23157,7 +23787,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));
@@ -23743,6 +24374,7 @@ function mergePartStyles(base, override) {
 // Export as namespaces with explicit typing
 const composables = composablesImport, utils = utilsImport, types = typesImport, constants = constantsImport, theme =  Object.freeze({
     __proto__: null,
+    DesignTokensCustomizer: DesignTokensCustomizer,
     RTLManager: RTLManager,
     ThemeApplicator: ThemeApplicator,
     ThemeComparator: ThemeComparator,
@@ -23827,9 +24459,10 @@ exports.Countdown = Countdown, exports.DATA_TABLE_CLASSES = DATA_TABLE_CLASSES,
 exports.DATA_TABLE_SELECTORS = DATA_TABLE_SELECTORS, exports.DATEPICKER = DATEPICKER, 
 exports.DEFAULT_ATOMIX_FONTS = DEFAULT_ATOMIX_FONTS, exports.DOTS = "...", exports.DROPDOWN = DROPDOWN, 
 exports.DROPDOWN_CSS_VARS = DROPDOWN_CSS_VARS, exports.DataTable = DataTable, exports.DatePicker = DatePicker, 
-exports.DonutChart = DonutChart, exports.Dropdown = Dropdown, exports.EDGE_PANEL = EDGE_PANEL, 
-exports.EdgePanel = EdgePanel, exports.ElevationCard = ElevationCard, exports.FOOTER = FOOTER, 
-exports.FORM = FORM, exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, exports.FooterLink = FooterLink, 
+exports.DesignTokensCustomizer = DesignTokensCustomizer, exports.DonutChart = DonutChart, 
+exports.Dropdown = Dropdown, exports.EDGE_PANEL = EDGE_PANEL, exports.EdgePanel = EdgePanel, 
+exports.ElevationCard = ElevationCard, exports.FOOTER = FOOTER, exports.FORM = FORM, 
+exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, exports.FooterLink = FooterLink, 
 exports.FooterSection = FooterSection, exports.FooterSocialLink = FooterSocialLink, 
 exports.Form = Form, exports.FormGroup = FormGroup, exports.FunnelChart = FunnelChart, 
 exports.GLASS_CONTAINER = GLASS_CONTAINER, exports.GaugeChart = GaugeChart, exports.Grid = Grid, 
@@ -23938,20 +24571,53 @@ exports.createDarkVariant =
  * Create a dark theme variant from a light theme
  */
 function(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
+            }
+        }
+    };
 }
 /**
  * Validate theme structure