@flikk/ui 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -9,7 +9,7 @@ import { cn } from '../../../utils/cn.js';
 const ApprovalCard = ({ title, subtitle, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {
     const riskColor = approvalCardTheme.badgeColors[riskLevel];
     const riskIcon = riskLevel === "critical" || riskLevel === "high" ? (jsx(ExclamationTriangleIcon, { className: "" })) : (jsx(CheckCircleIcon, { className: "" }));
-    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Content, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "text-base", children: title }), subtitle && (jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: subtitle }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
+    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Content, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "text-lg", children: title }), subtitle && (jsx("p", { className: "text-base text-[var(--color-text-secondary)]", children: subtitle }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-sm font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
 };
 
 export { ApprovalCard };

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -3,8 +3,8 @@ const codeBlockTheme = {
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
-    filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
-    languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
+    filename: "text-base font-medium text-[var(--color-text-secondary)] truncate",
+    languageLabel: "text-sm uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
     lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
     highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-neutral-400/5 dark:border-l-neutral-200",

package/dist/components/ai/PromptInput/PromptInput.js

@@ -453,7 +453,7 @@ className, textareaClassName, footerClassName, theme = {},
                     if (e.target.files)
                         processFiles(e.target.files);
                     e.target.value = "";
-                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: mergedTheme.dropzoneStyle, children: [jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)]" }), jsx("p", { className: "text-sm font-medium text-[var(--color-primary)]", children: dropzoneText })] })) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
+                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: mergedTheme.dropzoneStyle, children: [jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)]" }), jsx("p", { className: "text-base font-medium text-[var(--color-primary)]", children: dropzoneText })] })) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
                             var _a;
                             return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
                         }) })), jsxs("div", { className: cn("flex gap-2", variant === "simple" ? "items-end" : "items-start"), children: [jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, variant === "simple" && "!w-auto flex-1 min-w-0 justify-center", textareaClassName), style: {
@@ -478,7 +478,7 @@ className, textareaClassName, footerClassName, theme = {},
                                                                 fileInputRef.current.click();
                                                             }
                                                             onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
-                                                        }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", onClick: onVoiceClick, "aria-label": "Voice input", disabled: isDisabled, children: [jsx(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }), " Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled ? [controlledModel] : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(ChevronDownIcon, { className: "size-3 opacity-80", strokeWidth: 2 })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsxs(Dropdown.Item, { itemKey: model.key, children: [model.icon && (jsx("span", { className: "mr-2", children: model.icon })), model.label] }, model.key))) })] }))] }), jsx("div", { children: jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle), size: "sm", variant: "outline", color: "neutral", onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, children: submitButtonIcon }) })] }))] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-xs", isInvalid
+                                                        }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", onClick: onVoiceClick, "aria-label": "Voice input", disabled: isDisabled, children: [jsx(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }), " Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled ? [controlledModel] : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(ChevronDownIcon, { className: "size-3 opacity-80", strokeWidth: 2 })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsxs(Dropdown.Item, { itemKey: model.key, children: [model.icon && (jsx("span", { className: "mr-2", children: model.icon })), model.label] }, model.key))) })] }))] }), jsx("div", { children: jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle), size: "sm", variant: "outline", color: "neutral", onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, children: submitButtonIcon }) })] }))] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-sm", isInvalid
                     ? "text-[var(--color-danger)]"
                     : "text-[var(--color-text-muted)]"), role: isInvalid ? "alert" : undefined, "aria-live": isInvalid ? "polite" : undefined, children: displayHelperText }))] }));
 });

package/dist/components/ai/PromptInput/PromptInput.theme.js

@@ -1,6 +1,6 @@
 const promptInputTheme = {
     baseStyle: "rounded-[var(--card-radius)] border-[1px] border-[var(--color-border)] flex flex-col gap-2 shadow-real-md p-4 outline-2 outline-[var(--color-border)]/30 bg-white dark:bg-[var(--color-background-secondary)] ",
-    textareaStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-200 ease-in-out",
+    textareaStyle: "w-full bg-transparent text-base text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-200 ease-in-out",
     footerStyle: "flex justify-between items-end",
     actionsStyle: "flex gap-1",
     submitButtonStyle: "rounded-full",

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -2,7 +2,7 @@ const promptSuggestionTheme = {
     baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 rounded-full " +
         "bg-white dark:bg-[var(--color-background)] " +
         "border border-[var(--color-border)] " +
-        "text-sm font-medium text-[var(--color-text-primary)] " +
+        "text-base font-medium text-[var(--color-text-primary)] " +
         "cursor-pointer transition-all duration-300 " +
         "hover:bg-[var(--color-background-secondary)] dark:hover:bg-[var(--color-background-secondary)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",

package/dist/components/ai/StreamingResponse/MarkdownRenderer.js

@@ -49,7 +49,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
                 return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx(Prism, { style: syntaxTheme === 'dark' ? oneDark : oneLight, language: language, PreTag: "div", className: "rounded-lg my-3", ...props, children: String(children).replace(/\n$/, '') }) }));
             }
             // Inline code
-            return (jsx("code", { className: "bg-[var(--color-background-tertiary)] text-[var(--color-primary)] px-1.5 py-0.5 rounded text-sm font-mono", ...props, children: children }));
+            return (jsx("code", { className: "bg-[var(--color-background-tertiary)] text-[var(--color-primary)] px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children }));
         },
         // Paragraphs
         p({ children }) {
@@ -60,19 +60,19 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
             return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h1", { className: "text-2xl font-bold mb-4 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }) }));
         },
         h2({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h2", { className: "text-xl font-bold mb-3 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }) }));
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h2", { className: "text-2xl font-bold mb-3 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }) }));
         },
         h3({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h3", { className: "text-lg font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h3", { className: "text-xl font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
         },
         h4({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h4", { className: "text-base font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h4", { className: "text-lg font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
         },
         h5({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h5", { className: "text-sm font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h5", { className: "text-base font-semibold mb-2 text-[var(--color-text-primary)]", children: children }) }));
         },
         h6({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h6", { className: "text-sm font-semibold mb-2 text-[var(--color-text-secondary)]", children: children }) }));
+            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("h6", { className: "text-base font-semibold mb-2 text-[var(--color-text-secondary)]", children: children }) }));
         },
         // Lists
         ul({ children }) {

package/dist/components/ai/StreamingResponse/StreamingResponse.theme.js

@@ -1,9 +1,9 @@
 const streamingResponseTheme = {
     errorContainerStyle: "flex items-start gap-3 rounded-[var(--radius-base)] border border-[var(--color-danger-200)] bg-[var(--color-danger-50)] px-4 py-3",
-    errorTitleStyle: "text-sm font-medium text-[var(--color-danger)]",
-    errorMessageStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
-    errorRetryButtonStyle: "mt-2 text-sm font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
-    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-sm",
+    errorTitleStyle: "text-base font-medium text-[var(--color-danger)]",
+    errorMessageStyle: "text-base text-[var(--color-text-secondary)] mt-1",
+    errorRetryButtonStyle: "mt-2 text-base font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
+    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-base",
     loadingDotStyle: "w-1.5 h-1.5 rounded-full bg-current animate-pulse",
 };
 

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.theme.js

@@ -7,12 +7,12 @@ const thinkingIndicatorTheme = {
         sm: {
             container: "py-1",
             dot: "size-1",
-            label: "text-xs",
+            label: "text-sm",
         },
         md: {
             container: "py-1",
             dot: "size-1.5",
-            label: "text-sm",
+            label: "text-base",
         },
     },
 };

package/dist/components/ai/TokenCounter/TokenCounter.theme.js

@@ -8,19 +8,19 @@ const tokenCounterTheme = {
     progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
     sizes: {
         sm: {
-            container: "text-xs",
+            container: "text-sm",
             icon: "size-3",
-            text: "text-xs",
+            text: "text-sm",
         },
         md: {
-            container: "text-sm",
+            container: "text-base",
             icon: "size-4",
-            text: "text-sm",
+            text: "text-base",
         },
         lg: {
-            container: "text-base",
+            container: "text-lg",
             icon: "size-5",
-            text: "text-base",
+            text: "text-lg",
         },
     },
 };

package/dist/components/charts/ActivityRings/ActivityRings.js

@@ -83,7 +83,7 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
     }
     // Early return for invalid configuration
     if (!Array.isArray(rings) || rings.length === 0) {
-        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-sm text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
+        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
     }
     // State for controlling initial animation
     const [hasAnimated, setHasAnimated] = useState(false);

package/dist/components/charts/ActivityRings/ActivityRings.theme.js

@@ -18,8 +18,8 @@ const activityRingsTheme = {
         ],
     },
     centerText: {
-        label: "text-xl font-semibold text-[var(--color-text-primary)]",
-        suffix: "text-sm font-normal text-[var(--color-text-secondary)]/80",
+        label: "text-2xl font-semibold text-[var(--color-text-primary)]",
+        suffix: "text-base font-normal text-[var(--color-text-secondary)]/80",
     },
 };
 

package/dist/components/charts/BarChart/BarChart.js

@@ -89,9 +89,9 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     });
     // Early return for invalid data with error message
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_b = validation.errors[0]) === null || _b === void 0 ? void 0 : _b.message) ||
                         "Unable to render chart due to data validation errors" }), process.env.NODE_ENV === "development" &&
-                    validation.errors.length > 1 && (jsxs("details", { className: "text-xs text-warning-500", children: [jsxs("summary", { className: "cursor-pointer", children: ["Show all errors (", validation.errors.length, ")"] }), jsx("ul", { className: "mt-2 text-left", children: validation.errors.map((error, index) => (jsxs("li", { children: ["\u2022 ", error.message] }, index))) })] }))] }));
+                    validation.errors.length > 1 && (jsxs("details", { className: "text-sm text-warning-500", children: [jsxs("summary", { className: "cursor-pointer", children: ["Show all errors (", validation.errors.length, ")"] }), jsx("ul", { className: "mt-2 text-left", children: validation.errors.map((error, index) => (jsxs("li", { children: ["\u2022 ", error.message] }, index))) })] }))] }));
     }
     // Early return for empty data
     if (!sanitizedData || sanitizedData.length === 0) {
@@ -415,7 +415,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 }
                 : undefined }, keyIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings
                                 .filter((warning) => !warning.message.includes("has no valid numeric values"))
                                 .map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) }), validation.warnings.some((warning) => warning.message.includes("has no valid numeric values")) && (jsx("div", { className: "mt-2 pt-2 border-t border-[var(--color-warning-200)]", children: jsx("span", { className: "text-[var(--color-warning)]", children: "\u2139\uFE0F Null/undefined values are handled by using averages from other data points" }) }))] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx("defs", { children: jsxs("pattern", { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [jsx("rect", { width: "8", height: "8", fill: "var(--color-neutral-50)" }), jsx("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } })] }) }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                                 if (Math.abs(value) >= 1000)

package/dist/components/charts/ChartContainer.js

@@ -34,7 +34,7 @@ function ChartContainer({ data, config, className, children, minHeight = 200, wi
             minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight
         }),
     };
-    return (jsx(ChartContext.Provider, { value: { data: data || [], config: safeConfig }, children: jsx("div", { className: cn("flex aspect-auto justify-center text-xs", 
+    return (jsx(ChartContext.Provider, { value: { data: data || [], config: safeConfig }, children: jsx("div", { className: cn("flex aspect-auto justify-center text-sm", 
             // Add w-full as default if no width class is specified
             !hasWidthClass && "w-full", className), style: inlineStyles, ...props, children: children }) }));
 }

package/dist/components/charts/ComboChart/ComboChart.js

@@ -129,7 +129,7 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
     });
     // Early return for invalid data with error message
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: "Unable to render chart due to data validation errors" })] }));
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: "Unable to render chart due to data validation errors" })] }));
     }
     // Early return for empty data
     if (!sanitizedData || sanitizedData.length === 0) {
@@ -141,7 +141,7 @@ className, title, description, enableKeyboardNavigation = COMBO_CHART_DEFAULTS.e
     lineSeries.forEach((key) => {
         config[key];
     });
-    return (jsxs(ChartContainer, { data: sanitizedData, config: config, scales: scales, showGrid: showGrid, showXAxis: showXAxis, showYAxis: showYAxis, categoryGap: categoryGap, className: className, title: title, description: description, enableKeyboardNavigation: enableKeyboardNavigation, chartType: "combo", ...props, children: [jsx(ComboChartRenderers, { barKeys: barSeries, lineKeys: lineSeries, stacked: stacked, barRadius: resolvedBarRadius, dotRadius: resolvedDotRadius, gap: gap, categoryGap: categoryGap, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots }), showValidationWarnings && hasWarnings && (jsx("foreignObject", { x: "0", y: "0", width: "100%", height: "50", children: jsxs("div", { className: "p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), " Some data validation warnings occurred."] }) })), children] }));
+    return (jsxs(ChartContainer, { data: sanitizedData, config: config, scales: scales, showGrid: showGrid, showXAxis: showXAxis, showYAxis: showYAxis, categoryGap: categoryGap, className: className, title: title, description: description, enableKeyboardNavigation: enableKeyboardNavigation, chartType: "combo", ...props, children: [jsx(ComboChartRenderers, { barKeys: barSeries, lineKeys: lineSeries, stacked: stacked, barRadius: resolvedBarRadius, dotRadius: resolvedDotRadius, gap: gap, categoryGap: categoryGap, strokeWidth: strokeWidth, curved: curved, curveType: curveType, showDots: showDots }), showValidationWarnings && hasWarnings && (jsx("foreignObject", { x: "0", y: "0", width: "100%", height: "50", children: jsxs("div", { className: "p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), " Some data validation warnings occurred."] }) })), children] }));
 };
 
 export { ComboChart };

package/dist/components/charts/DonutChart/DonutChart.theme.js

@@ -11,7 +11,7 @@ const donutChartTheme = {
     // Text styling
     text: {
         label: "text-2xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
-        subtitle: "text-sm text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
+        subtitle: "text-base text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
     },
     // Default color palette (CSS variables for dark mode support)
     // Note: These are resolved at runtime via getComputedStyle

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.js

@@ -243,7 +243,7 @@ const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap =
             }) }));
     };
     if (!data || data.length === 0) {
-        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, children: jsx("div", { className: "text-sm text-[var(--color-text-secondary)]", children: "No data" }) }));
+        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, children: jsx("div", { className: "text-base text-[var(--color-text-secondary)]", children: "No data" }) }));
     }
     return (jsxs("div", { className: cn("flex gap-4 items-center", getLayoutClasses(), className), children: [jsxs(motion.div, { className: cn(theme.baseStyle), style: { width: containerSize, height: containerSize }, role: "img", "aria-label": `Donut chart with ${segments.length} segments`, ...restProps, children: [jsxs("svg", { viewBox: `0 0 ${svgSize} ${svgSize}`, width: "100%", height: "100%", className: "overflow-visible relative z-10", children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#000000", strokeWidth: strokeWidth > 2 ? strokeWidth - 2 : 1, opacity: 0.03 }), segments.map((segment, index) => roundedCaps ? (jsx(AnimatedStrokeSegment, { center: center, radius: radius, strokeWidth: strokeWidth, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: () => handleSegmentMouseEnter(index), onMouseLeave: handleSegmentMouseLeave, onClick: () => handleSegmentClick(index), clickable: !!onSegmentClick }, `segment-${index}`)) : (jsx(AnimatedSegment, { center: center, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: segment.startAngle, endAngle: segment.endAngle, color: segment.color, delay: segment.animationDelay, duration: segment.animationDuration, shouldAnimate: showAnimation && hasAnimated, shouldReduceMotion: shouldReduceMotion, isHovered: hoveredSegment === index, isFaded: hoveredSegment !== null && hoveredSegment !== index, onMouseEnter: () => handleSegmentMouseEnter(index), onMouseLeave: handleSegmentMouseLeave, onClick: () => handleSegmentClick(index), clickable: !!onSegmentClick }, `segment-${index}`)))] }), centerContent && (jsx("div", { className: cn(theme.centerContent), children: centerContent }))] }), renderLegend()] }));
 };

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.theme.js

@@ -8,7 +8,7 @@ const multiSegmentDonutChartTheme = {
     track: "text-[var(--color-border)]",
     // Legend styling
     legend: {
-        container: "flex flex-col gap-2 text-sm",
+        container: "flex flex-col gap-2 text-base",
         item: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity",
         label: "text-[var(--color-text-primary)] font-medium",
         value: "text-[var(--color-text-secondary)] ml-auto",

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -72,7 +72,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
     const containerWidth = typeof width === "number" ? `${width}px` : width;
     // Return empty state if no valid data
     if (stages.length === 0) {
-        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available", ...props, children: jsx("div", { className: "flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm", children: "No data available" }) }));
+        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available", ...props, children: jsx("div", { className: "flex items-center justify-center h-full text-[var(--color-text-muted)] text-base", children: "No data available" }) }));
     }
     const viewBoxWidth = 150;
     const viewBoxHeight = 100;
@@ -356,9 +356,9 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: [jsx("div", { className: cn("text-sm font-semibold whitespace-nowrap", labelPosition === "inside"
+                            : {}), children: [jsx("div", { className: cn("text-base font-semibold whitespace-nowrap", labelPosition === "inside"
                                     ? "text-white drop-shadow-md"
-                                    : "text-[var(--color-text-primary)]"), children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: cn("text-xs whitespace-nowrap", labelPosition === "inside"
+                                    : "text-[var(--color-text-primary)]"), children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: cn("text-sm whitespace-nowrap", labelPosition === "inside"
                                     ? "text-white/90 drop-shadow-md"
                                     : "text-[var(--color-text-secondary)]"), children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
                 }), orientation === "vertical" &&
@@ -376,7 +376,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: [jsx("div", { className: "text-sm font-semibold text-white drop-shadow-md whitespace-nowrap text-center", children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: "text-xs text-white/90 drop-shadow-md whitespace-nowrap text-center", children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
+                            : {}), children: [jsx("div", { className: "text-base font-semibold text-white drop-shadow-md whitespace-nowrap text-center", children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: "text-sm text-white/90 drop-shadow-md whitespace-nowrap text-center", children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
                 }), orientation === "horizontal" &&
                 showDropoff &&
                 stages.map((stage, index) => {
@@ -394,7 +394,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs("span", { className: "text-xs text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
+                            : {}), children: jsxs("span", { className: "text-sm text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
                 }), orientation === "vertical" &&
                 showDropoff &&
                 stages.map((stage, index) => {
@@ -411,7 +411,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs("span", { className: "text-xs text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
+                            : {}), children: jsxs("span", { className: "text-sm text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
                 }), orientation === "horizontal" &&
                 showConversionRate &&
                 stages.map((stage, index) => {
@@ -455,7 +455,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                         initial: "hidden",
                         animate: "visible",
                     }
-                    : {}), children: [jsx("div", { className: "text-xs text-[var(--color-text-secondary)] mb-1", children: "Overall Conversion" }), jsxs("div", { className: "text-lg font-bold text-[var(--color-text-primary)]", children: [overallConversion, "%"] }), jsxs("div", { className: "text-xs text-[var(--color-text-muted)] mt-1", children: [formatDisplayValue(stages[0].value), " \u2192", " ", formatDisplayValue(stages[stages.length - 1].value)] })] })), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" })] }));
+                    : {}), children: [jsx("div", { className: "text-sm text-[var(--color-text-secondary)] mb-1", children: "Overall Conversion" }), jsxs("div", { className: "text-xl font-bold text-[var(--color-text-primary)]", children: [overallConversion, "%"] }), jsxs("div", { className: "text-sm text-[var(--color-text-muted)] mt-1", children: [formatDisplayValue(stages[0].value), " \u2192", " ", formatDisplayValue(stages[stages.length - 1].value)] })] })), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" })] }));
 };
 FunnelChart.displayName = "FunnelChart";
 

package/dist/components/charts/Heatmap/Heatmap.theme.js

@@ -10,7 +10,7 @@ const heatmapTheme = {
     // Base cell styles (individual cells add opacity via inline styles)
     cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
     // Axis labels using CSS variables for dark mode support
-    axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
+    axisLabelStyle: "text-sm text-[var(--color-text-secondary)] font-medium select-none",
     // Legend using correct CSS variables
     legendStyle: "w-full space-y-1.5 mt-3",
 };

package/dist/components/charts/Heatmap/HeatmapCell.js

@@ -88,7 +88,7 @@ className, onClick, onHover, onMouseMove, onLeave, children, }) => {
                 e.preventDefault();
                 onClick(data);
             }
-        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300", children: children })) }));
+        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-700 dark:text-gray-300", children: children })) }));
 };
 const HeatmapCell = React__default.memo(HeatmapCellInner);
 

package/dist/components/charts/Heatmap/HeatmapLegend.js

@@ -11,7 +11,7 @@ minValue = 0, maxValue = 100, labels = {
     const gradientStyle = {
         background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
     };
-    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
+    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
 };
 
 export { HeatmapLegend };

package/dist/components/charts/RadarChart/RadarChart.theme.js

@@ -13,11 +13,11 @@ const radarChartTheme = {
     // Axis spoke stroke color (gray-300 equivalent)
     axisColor: "#d1d5db",
     // Axis label classes (applied to <text> elements via className)
-    labelStyle: "text-xs fill-[#6b7280] select-none",
+    labelStyle: "text-sm fill-[#6b7280] select-none",
     // Legend container
     legendStyle: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2",
     // Individual legend item
-    legendItemStyle: "flex items-center gap-2 text-sm",
+    legendItemStyle: "flex items-center gap-2 text-base",
     // Colored dot in legend
     legendDotStyle: "w-2.5 h-2.5 rounded-full shrink-0",
     // Legend label text

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -201,7 +201,7 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
                                 }
                                 handleMouseInteraction();
                             }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
-                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
+                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
 };
 ScatterPlot.displayName = 'ScatterPlot';
 

package/dist/components/charts/ScatterPlot/ScatterPlot.theme.js

@@ -4,7 +4,7 @@
 const scatterPlotTheme = {
     containerStyle: 'relative inline-flex flex-col items-center w-full',
     svgStyle: 'overflow-visible',
-    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
+    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-base',
     // Grid styles
     gridLineStyle: 'stroke-[var(--color-border)]',
     // Axis styles
@@ -17,7 +17,7 @@ const scatterPlotTheme = {
     legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
     legendItemStyle: 'flex items-center gap-2',
     legendDotStyle: 'w-3 h-3 rounded-full',
-    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
+    legendLabelStyle: 'text-base text-[var(--color-text-secondary)]',
     // Default category colors using CSS variables
     colors: [
         'var(--color-primary)',

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -65,7 +65,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
     });
     // Early return for invalid data
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
                         "Unable to render chart due to data validation errors" })] }));
     }
     // Early return for empty data
@@ -282,7 +282,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                     } }, key));
             }) }, categoryIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                                 if (stackOffset === "expand")
                                     return `${value}%`;
                                 if (Math.abs(value) >= 1000)

package/dist/components/charts/shared/ChartErrorBoundary/ChartErrorBoundary.js

@@ -39,7 +39,7 @@ class ChartErrorBoundary extends Component {
                 return this.props.fallback;
             }
             // Default error UI
-            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-sm font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-sm text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-xs", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
+            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-base font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-base text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-sm text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-sm font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-sm", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-sm bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
         }
         return this.props.children;
     }

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -11,7 +11,7 @@ const ChartLegendContent = ({ payload = [], nameKey = 'name', className, ...prop
     return (jsx("div", { className: `flex flex-wrap gap-4 ${className || ''}`, ...props, children: payload.map((entry, index) => {
             const name = entry[nameKey] || entry.dataKey || `Series ${index + 1}`;
             const color = entry.color || '#8884d8';
-            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-sm text-gray-600", children: name })] }, index));
+            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-base text-gray-600", children: name })] }, index));
         }) }));
 };
 

package/dist/components/charts/shared/ChartText/ChartText.js

@@ -11,7 +11,7 @@ const ChartText = ({ children, textAnchor = "start", dominantBaseline = "auto",
     const theme = chartTextTheme;
     // Truncate text if needed
     const truncateText = (text, maxWidth) => {
-        // Rough estimate: 6px per character for text-sm
+        // Rough estimate: 6px per character for text-base
         if (!maxWidth || text.length <= maxWidth / 6) {
             return text;
         }

package/dist/components/charts/shared/ChartText/ChartText.theme.js

@@ -3,7 +3,7 @@
  * Uses fixed Tailwind styling for consistency across charts
  */
 const chartTextTheme = {
-    baseStyle: "transition-all duration-200 text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
+    baseStyle: "transition-all duration-200 text-sm  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
 };
 
 export { chartTextTheme };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.theme.js

@@ -5,14 +5,14 @@
  */
 const chartTooltipTheme = {
     baseStyle: "fixed z-50 text-[var(--color-text-primary)] rounded-[var(--tooltip-radius)] px-3 py-2 shadow-lg pointer-events-none glass-effect",
-    contentStyle: "whitespace-nowrap text-sm",
+    contentStyle: "whitespace-nowrap text-base",
     multiSeriesContainerStyle: "text-left",
-    categoryStyle: "text-xs font-semibold mb-1 text-[var(--color-text-primary)]",
+    categoryStyle: "text-sm font-semibold mb-1 text-[var(--color-text-primary)]",
     seriesContainerStyle: "space-y-0.5",
     seriesRowStyle: "flex items-center justify-between gap-3",
     dotStyle: "size-2 rounded-[calc(var(--radius-base)*0.75)]",
-    labelStyle: "text-xs opacity-90 text-[var(--color-text-secondary)]",
-    valueStyle: "text-xs font-semibold text-[var(--color-text-primary)]",
+    labelStyle: "text-sm opacity-90 text-[var(--color-text-secondary)]",
+    valueStyle: "text-sm font-semibold text-[var(--color-text-primary)]",
 };
 
 export { chartTooltipTheme };

package/dist/components/core/Alert/Alert.theme.js

@@ -6,7 +6,7 @@ import { semanticTextColors } from '../../../utils/colorUtils.js';
  */
 const alertTheme = {
     // Base styles applied to all alerts
-    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
+    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-base border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
     // Visual style variants (structure only, no colors)
     variants: {
         default: "",

package/dist/components/core/AlertDialog/AlertDialog.js

@@ -10,7 +10,7 @@ const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) =>
     const triggerElement = isValidElement(trigger)
         ? cloneElement(trigger, { onClick: handleOpen })
         : null;
-    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-sm", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
+    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-base", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";
 

package/dist/components/core/Avatar/Avatar.theme.js

@@ -6,11 +6,11 @@ const avatarTheme = {
     baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-semibold tracking-tighter rounded-[var(--avatar-radius)] ring-2 ring-[var(--color-primary)]/10 border border-[var(--border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 glass-effect",
     // Size variants using CSS variables
     sizes: {
-        xs: "size-[var(--avatar-size-xs)] text-[var(--avatar-text-xs)]",
-        sm: "size-[var(--avatar-size-sm)] text-[var(--avatar-text-sm)]",
-        md: "size-[var(--avatar-size-md)] text-[var(--avatar-text-md)]",
-        lg: "size-[var(--avatar-size-lg)] text-[var(--avatar-text-lg)]",
-        xl: "size-[var(--avatar-size-xl)] text-[var(--avatar-text-xl)]",
+        xs: "size-[var(--avatar-size-xs)] text-sm",
+        sm: "size-[var(--avatar-size-sm)] text-base",
+        md: "size-[var(--avatar-size-md)] text-lg",
+        lg: "size-[var(--avatar-size-lg)] text-xl",
+        xl: "size-[var(--avatar-size-xl)] text-2xl",
     },
     // Status indicator styles
     statuses: {