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

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

@@ -11,7 +11,7 @@ const avatarGroupTheme = {
         loose: "-ml-2 z-10",
     },
     // Overflow avatar styles
-    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
+    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-base flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
 };
 
 export { avatarGroupTheme };

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

@@ -63,8 +63,8 @@ const badgeTheme = {
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: "text-xs px-1.5 py-0.5 gap-1",
-        md: "text-sm px-2 py-0.5 gap-1",
+        sm: "text-sm px-1.5 py-0.5 gap-1",
+        md: "text-base px-2 py-0.5 gap-1",
     },
     // Border radius per size (using CSS variable)
     radiusSizes: {

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -43,7 +43,7 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
     const renderItem = (item, index, isLast) => {
         const isCurrentPage = isLast || !item.href;
         const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), item.label] }));
-        return (jsx("span", { className: "flex items-center text-sm", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
+        return (jsx("span", { className: "flex items-center text-base", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
     };
     // Render separator
     const renderSeparator = (index) => {

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

@@ -124,19 +124,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-base h-fit",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-base h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-base h-fit",
+            link: "p-0 text-lg h-fit",
         },
     },
     // State styles

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

@@ -44,7 +44,7 @@ const buttonGroupTheme = {
         vertical: "h-px self-stretch",
     },
     // Text styles for ButtonGroupText component
-    textStyles: "px-3 py-2 text-sm text-[var(--color-text-primary)] flex items-center",
+    textStyles: "px-3 py-2 text-base text-[var(--color-text-primary)] flex items-center",
 };
 
 export { buttonGroupTheme };

package/dist/components/core/Calendar/Calendar.js

@@ -371,7 +371,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             }
         }
     }, [minDate, maxDate, customIsDateDisabled, currentMonth, currentYear, onViewDateChange, mode, value, onChange, selectedValue, rangeSelectionState]);
-    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-sm font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-sm font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
+    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
                     var _a;
                     const dayNumber = day.date.getDate();
                     return (jsxs(motion.button, { type: "button", onClick: () => handleDateSelect(day.date), disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }, day.date.toISOString()));

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

@@ -5,7 +5,7 @@
 const calendarTheme = {
     baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
     headerStyle: "flex items-center justify-between mb-4",
-    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
+    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
         "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)]",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",
     navButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] border-0 bg-transparent " +
@@ -16,7 +16,7 @@ const calendarTheme = {
         "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-800)] " +
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     weekdaysStyle: "grid grid-cols-7 mb-2",
-    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)] " +
+    weekdayStyle: "flex items-center justify-center h-8 text-sm font-medium text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
     daysGridStyle: "grid grid-cols-7 gap-0.5",
     dayButtonStyle: "relative flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
@@ -45,9 +45,9 @@ const calendarTheme = {
         // Focus offset for dark mode
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     dayButtonSizes: {
-        sm: "size-8 text-sm",
-        md: "size-10 text-sm",
-        lg: "size-12 text-base",
+        sm: "size-8 text-base",
+        md: "size-10 text-base",
+        lg: "size-12 text-lg",
     },
 };
 

package/dist/components/core/Calendar/CalendarMini/CalendarMini.js

@@ -242,7 +242,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                                 day: "numeric",
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
-                                            }), children: [jsx("div", { className: "text-sm font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
+                                            }), children: [jsx("div", { className: "text-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
                                     }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";

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

@@ -1,8 +1,8 @@
 const cardTheme = {
     baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)] [&>*+*]:pt-0",
     headerStyle: "flex flex-col space-y-1.5 p-6",
-    titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
+    titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
+    subtitleStyle: "text-base text-[var(--color-text-muted)]",
     contentStyle: "p-6",
     footerStyle: "flex items-center p-6",
 };

package/dist/components/core/CommandPalette/CommandItem.js

@@ -126,7 +126,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-sm opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
+    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
 };
 
 export { CommandItem };

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

@@ -8,12 +8,12 @@ const commandPaletteTheme = {
         // Dark mode
         "dark:ring-black/30",
     searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
-    searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
+    searchInput: "w-full px-0 py-0 text-base bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "focus:outline-none focus:ring-0 " +
         // Dark mode
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
-    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
+    groupLabel: "px-4 py-1 text-sm font-semibold text-[var(--color-text-muted)]/50 uppercase " +
         "dark:text-[var(--color-neutral-500)]",
     commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
         "hover:bg-[var(--color-primary)] " +
@@ -23,7 +23,7 @@ const commandPaletteTheme = {
         // Dark mode - adjust hover state
         "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
         "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
-    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
+    emptyState: "px-4 py-12 text-center text-base text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
 };
 

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

@@ -13,10 +13,10 @@ const contextMenuTheme = {
     // Submenu trigger - based on Dropdown item style with chevron space
     subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-background-tertiary)] ` +
         "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
-    // Submenu content - similar to main menu but slightly smaller
+    // Submenu content - matches main dropdown menu style
     subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
-        "bg-[var(--color-background-secondary)] shadow-xl flex flex-col p-1 focus:outline-none " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
+        "bg-[var(--color-background)] shadow-real-xl flex flex-col p-1 focus:outline-none " +
+        "dark:bg-[var(--color-background-secondary)]",
     // Separator - horizontal divider
     separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
         "dark:bg-[var(--color-neutral-700)]",

package/dist/components/core/ContextMenu/ContextMenuItem.js

@@ -22,7 +22,7 @@ const ContextMenuItem = React__default.forwardRef(({ children, className, checke
     const resolvedStartContent = hasPrefix ? (jsxs(Fragment, { children: [checked && (jsx(CheckIcon, { className: theme.itemCheckedStyle, "aria-hidden": "true" })), startContent] })) : undefined;
     // Build end content: user's endContent OR shortcut display
     const resolvedEndContent = endContent ||
-        (shortcut ? (jsx("span", { className: "text-xs text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
+        (shortcut ? (jsx("span", { className: "text-sm text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
     return (jsx(MenuItem, { ref: ref, role: "menuitem", disabled: disabled, isDanger: isDanger, startContent: resolvedStartContent, endContent: resolvedEndContent, subtitle: subtitle, onActivate: handleActivate, "data-checked": checked, "aria-checked": checked ? "true" : undefined, className: cn(checked && "pl-8", className), theme: {
             baseStyle: theme.itemStyle,
             dangerStyle: theme.itemDangerStyle,

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

@@ -8,8 +8,8 @@ const drawerTheme = {
     content: "h-full flex flex-col",
     header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
-    title: "text-base font-semibold leading-6 text-[var(--color-text-primary)]",
-    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
+    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-4",
     footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
         "dark:border-[var(--color-neutral-700)]",

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

@@ -9,7 +9,7 @@ const dropdownTheme = {
     itemDangerStyle: menuItemTheme.dangerStyle,
     itemFocusStyle: menuItemTheme.focusStyle,
     // Section title styling
-    sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
+    sectionTitleStyle: "px-2 py-1.5 text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
     // Separator between sections

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

@@ -5,9 +5,9 @@ const emptyTheme = {
     // Base container styles - customizable spacing, colors, and layout
     baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
     // Title text styles - customizable typography and colors
-    titleStyle: "text-base font-semibold text-[var(--color-text-primary)]",
+    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)]",
     // Description text styles - customizable typography and colors
-    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
+    subtitleStyle: "text-base text-[var(--color-text-muted)]",
 };
 
 export { emptyTheme };

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

@@ -4,10 +4,10 @@
 const kbdTheme = {
     baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-[calc(var(--radius-base)*0.75)]  bg-neutral-100 border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
     sizes: {
-        sm: 'text-xs px-1 py-0.5 min-w-[1.25rem]',
-        md: 'text-sm px-1.5 py-0.5 min-w-[1.5rem]',
+        sm: 'text-sm px-1 py-0.5 min-w-[1.25rem]',
+        md: 'text-base px-1.5 py-0.5 min-w-[1.5rem]',
     },
-    separatorStyle: 'text-[var(--color-text-muted)] text-xs',
+    separatorStyle: 'text-[var(--color-text-muted)] text-sm',
 };
 
 export { kbdTheme };

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

@@ -14,7 +14,7 @@ const loaderTheme = {
     // Linear bar (foreground)
     linearBarStyle: "h-full rounded-full transition-all duration-300 ease-out",
     // Label text for linear variant
-    linearLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
+    linearLabelStyle: "text-base font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
     // Size variants for both circular and linear
     sizes: {
         sm: {

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

@@ -1,6 +1,6 @@
 const menuItemTheme = {
     // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-2.5 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
+    baseStyle: "relative flex items-center gap-2 px-2.5 py-1.5 text-base font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
         "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
         "data-[focused=true]:bg-[var(--color-background-secondary)] " +
         "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
@@ -19,7 +19,7 @@ const menuItemTheme = {
     focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     // Description text below the label
-    subtitleStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate",
 };
 
 export { menuItemTheme };

package/dist/components/core/Message/Message.js

@@ -98,7 +98,7 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     const renderedContent = shouldAnimate ? (jsx(TypeWriter, { text: messageContent, speed: typingSpeed, enabled: true, className: "break-words" })) : (messageContent);
     // System messages render differently (centered, no avatar)
     if (variant === "system") {
-        return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-sm", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
+        return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-base", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
     }
     return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
 });

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

@@ -5,8 +5,8 @@
 const messageTheme = {
     // Shared base styles (apply to all variants)
     bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
-    containerBaseStyle: "flex items-start gap-3 h-fit text-sm",
-    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    containerBaseStyle: "flex items-start gap-3 h-fit text-base",
+    timestampStyle: "text-sm text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
     // Variant-specific modifiers (only differences)
     variants: {
         sender: {
@@ -29,14 +29,14 @@ const messageTheme = {
         system: {
             containerModifier: "justify-center", // Center alignment
             bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
-                "text-xs border-none " +
+                "text-sm border-none " +
                 // Dark mode
                 "",
             timestampModifier: "text-center",
         },
     },
     // Feature styles (streaming, actions)
-    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs " +
+    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-sm " +
         "dark:text-[var(--color-neutral-500)]",
     actionsContainerStyle: "flex items-start gap-3",
 };

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

@@ -8,8 +8,8 @@ const modalTheme = {
     },
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
-    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-lg leading-6 font-semibold text-[var(--color-text-primary)]",
+    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };

package/dist/components/core/NavItem/NavItem.js

@@ -104,7 +104,7 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
                     ? React__default.cloneElement(startContent, {
                         className: cn(iconClasses, startContent.props.className),
                     })
-                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
+                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
     // Wrap with link if href is provided
     if (href && !actualIsDisabled) {
         const LinkContent = (jsx("a", { href: href, className: "block group", children: content }));

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

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {

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

@@ -15,8 +15,8 @@ const offlineIndicatorTheme = {
     offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
     online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
     icon: "size-4 flex-shrink-0",
-    message: "text-xs font-medium",
-    queueCount: "text-xs opacity-80 ml-1",
+    message: "text-sm font-medium",
+    queueCount: "text-sm opacity-80 ml-1",
 };
 
 export { offlineIndicatorTheme };

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

@@ -2,7 +2,7 @@ const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex items-center gap-4",
     titleStyle: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1",
     actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
     iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",
     separatorStyle: "border-b border-[var(--color-border)] mt-4",

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

@@ -26,8 +26,8 @@ const paginationTheme = {
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes
     itemSizes: {
-        sm: "size-8 min-w-[2rem] text-sm",
-        md: "size-10 min-w-[2.5rem] text-sm",
+        sm: "size-8 min-w-[2rem] text-base",
+        md: "size-10 min-w-[2.5rem] text-base",
     },
     // Ellipsis styles
     ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",

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

@@ -27,9 +27,9 @@ const pillTheme = {
      * Size variants
      */
     sizes: {
-        sm: "text-xs px-2 py-0.5 gap-0.5",
-        md: "text-sm px-2.5 py-1 gap-1",
-        lg: "text-sm px-3 py-1 gap-1.5",
+        sm: "text-sm px-2 py-0.5 gap-0.5",
+        md: "text-base px-2.5 py-1 gap-1",
+        lg: "text-base px-3 py-1 gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

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

@@ -11,9 +11,9 @@ const progressTheme = {
     // Fill (progress bar) styles
     fillStyle: "h-full rounded-full",
     // Label text styles
-    labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    labelStyle: "text-base font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
     // Inside label styles (when label is positioned inside the bar)
-    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--color-primary-contrast)] tabular-nums",
+    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-sm font-medium text-[var(--color-primary-contrast)] tabular-nums",
     // Size variants for track height
     sizes: {
         sm: "h-1.5",

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

@@ -25,9 +25,9 @@ const segmentedItemTheme = {
     baseStyle: "relative flex min-h-full min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-1.5px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
     // Size variants using CSS variables
     sizes: {
-        sm: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-sm)]",
-        md: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-md)]",
-        lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
+        sm: "text-base px-[var(--segmented-px-sm)]",
+        md: "text-base px-[var(--segmented-px-md)]",
+        lg: "text-base px-[var(--segmented-px-lg)]",
     },
     // Selected state
     selectedStyle: "text-[var(--color-text-primary)] z-10",

package/dist/components/core/Sidebar/SidebarNavGroup.js

@@ -7,7 +7,7 @@ const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollaps
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     const showTitle = title && (!collapsed || showTitleWhenCollapsed);
-    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

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

@@ -10,8 +10,8 @@ const tabsTheme = {
     triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
     // TabsTrigger size variants using CSS variables where applicable
     triggerSizes: {
-        sm: "px-2 py-1.5 text-sm gap-1",
-        md: "px-2 py-2 text-sm gap-1",
+        sm: "px-2 py-1.5 text-base gap-1",
+        md: "px-2 py-2 text-base gap-1",
     },
     // TabsContent styles with proper CSS variables
     contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",

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

@@ -3,8 +3,8 @@ const tagTheme = {
         "bg-white dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
         "text-[var(--color-text-primary)]",
     sizes: {
-        sm: "text-xs px-2.5 py-0.5",
-        md: "text-sm px-2.5 py-0.5",
+        sm: "text-sm px-2.5 py-0.5",
+        md: "text-base px-2.5 py-0.5",
     },
     disabledStyle: "opacity-50 cursor-not-allowed",
     removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +

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

@@ -8,10 +8,10 @@ const toastTheme = {
     },
     iconStyle: "flex-shrink-0 size-5 mt-0.5",
     iconCenteredStyle: "flex-shrink-0 size-5",
-    titleStyle: "font-semibold text-sm",
-    textOnlyStyle: "text-sm",
-    subtitleStyle: "text-sm mt-0.5 opacity-60",
-    actionStyle: "text-xs font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
+    titleStyle: "font-semibold text-base",
+    textOnlyStyle: "text-base",
+    subtitleStyle: "text-base mt-0.5 opacity-60",
+    actionStyle: "text-sm font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
         "dark:bg-white/10 dark:border-white/20 dark:hover:bg-white/20 dark:text-white",
     closeButtonStyle: "absolute top-2 right-2 flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
     closeButtonCenteredStyle: "flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",

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

@@ -1,6 +1,6 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
+    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
         "dark:bg-neutral-800/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 

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

@@ -1,7 +1,7 @@
 const treeTheme = {
     baseStyle: 'flex flex-col w-full',
     nodeStyle: 'flex items-center py-1 pr-1 rounded-[calc(var(--radius-base)*0.75)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors select-none gap-2',
-    labelStyle: 'flex-1 text-base text-[var(--color-text-primary)] truncate',
+    labelStyle: 'flex-1 text-lg text-[var(--color-text-primary)] truncate',
     iconStyle: 'flex-shrink-0 text-[var(--color-text-muted)]',
     expandIconStyle: 'flex-shrink-0 mr-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer size-4 flex items-center justify-center',
     indentSize: '1rem',

package/dist/components/data-display/DescriptionList/DescriptionList.theme.js

@@ -1,8 +1,8 @@
 const descriptionListTheme = {
     baseStyle: "divide-y divide-[var(--color-border)] min-w-0",
     itemStyle: "px-4 py-3",
-    termStyle: "text-sm/6 font-medium text-[var(--color-text-primary)]",
-    detailStyle: "mt-1 text-sm/6 text-[var(--color-text-secondary)]",
+    termStyle: "text-base/6 font-medium text-[var(--color-text-primary)]",
+    detailStyle: "mt-1 text-base/6 text-[var(--color-text-secondary)]",
 };
 
 export { descriptionListTheme };

package/dist/components/data-display/Feed/Feed.js

@@ -54,7 +54,7 @@ const FeedItem = React__default.forwardRef(({ variant = "default", title, timest
             case "icon":
                 return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && jsxs("span", { className: theme.titleStyle, children: [title, " "] }), children] }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
             case "avatar":
-                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-sm"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
             case "comment-input": {
                 const handleSubmit = () => {
                     const trimmed = inputValue.trim();

package/dist/components/data-display/Feed/Feed.theme.js

@@ -12,8 +12,8 @@ const feedTheme = {
     // Content
     contentStyle: "min-w-0 flex-1",
     titleStyle: "font-medium text-[var(--color-text-primary)]",
-    actionTextStyle: "text-sm text-[var(--color-text-secondary)]",
-    timestampStyle: "mt-1 text-xs text-[var(--color-text-muted)]/80 whitespace-nowrap font-medium",
+    actionTextStyle: "text-base text-[var(--color-text-secondary)]",
+    timestampStyle: "mt-1 text-sm text-[var(--color-text-muted)]/80 whitespace-nowrap font-medium",
     // Comment input
     commentInputWrapperStyle: "min-w-0 flex-1 space-y-2",
     commentInputFooterStyle: "flex justify-end",

package/dist/components/data-display/GanttChart/GanttChart.theme.js

@@ -1,5 +1,5 @@
 const ganttChartTheme = {
-    baseStyle: "flex flex-col w-full overflow-hidden text-sm",
+    baseStyle: "flex flex-col w-full overflow-hidden text-base",
     toolbarStyle: "flex flex-wrap items-center justify-between gap-3 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
     tablePanelStyle: "hidden sm:flex flex-col shrink-0 overflow-hidden",
     chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
@@ -9,7 +9,7 @@ const ganttChartTheme = {
     tableTaskRowStyle: "flex items-center hover:bg-[var(--color-background-secondary)] transition-colors",
     tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
     timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)]",
-    timelineMonthStyle: "text-xs font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
+    timelineMonthStyle: "text-sm font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
     timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center",
     gridLineStyle: "border-r border-[var(--color-border)]/30",
     weekendStyle: "bg-[var(--color-background-secondary)]/50",

package/dist/components/data-display/GanttChart/GanttChartPanel.js

@@ -64,7 +64,7 @@ const GanttChartPanel = forwardRef(({ onScroll, days, monthSpans }, ref) => {
         }
     }, [rows, focusedTaskId, setFocusedTaskId, onTaskClick]);
     if (tasks.length === 0) {
-        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: jsxs("div", { className: "flex flex-col items-center gap-2 text-[var(--color-text-muted)]", children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-sm font-medium", children: "No tasks to display" }), jsx("div", { className: "text-xs opacity-70", children: "Add tasks to see them on the timeline" })] }) }));
+        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: jsxs("div", { className: "flex flex-col items-center gap-2 text-[var(--color-text-muted)]", children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium", children: "No tasks to display" }), jsx("div", { className: "text-sm opacity-70", children: "Add tasks to see them on the timeline" })] }) }));
     }
     return (jsx("div", { className: cn(theme.chartPanelStyle), children: jsx("div", { ref: ref, className: "overflow-auto flex-1 min-h-0 focus:outline-none", onScroll: onScroll, onKeyDown: handleKeyDown, tabIndex: 0, role: "grid", "aria-label": "Gantt chart timeline", "data-gantt-chart-scroll": true, children: jsxs("div", { style: { width: totalWidth }, children: [jsx("div", { className: "sticky top-0 z-10", children: jsx(GanttTimelineHeader, { days: days, monthSpans: monthSpans }) }), jsxs("div", { className: "relative", style: { height: bodyHeight }, children: [jsx(GanttTimelineGrid, { days: days, height: bodyHeight }), jsx(GanttDependencyArrows, {}), rows.map((row, i) => {
                                 const top = i * rowHeight;