@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.26

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

@@ -1,5 +1,5 @@
 const codeBlockTheme = {
-    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-background)]",
+    baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-sunken)]",
     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",
@@ -10,7 +10,7 @@ const codeBlockTheme = {
     highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
-    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     copySuccess: "text-[var(--color-success)]",
 };
 

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

@@ -106,6 +106,7 @@ import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import '../../forms/TimePicker/WheelColumn.js';
 import '../../forms/TimePicker/TimePicker.theme.js';
 import '../../forms/Slider/Slider.js';

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

@@ -88,6 +88,7 @@ import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 
 /**
  * Format seconds into MM:SS display

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

@@ -73,7 +73,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
                 return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: 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 — skip word animation for code tokens
-            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-(--color-background-tertiary) text-(--color-primary) px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
+            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-(--color-surface-sunken) text-(--color-primary) px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
         },
         // Paragraphs — word-level animation
         p({ children }) {

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

@@ -4,7 +4,7 @@ const tokenCounterTheme = {
     countStyle: "font-medium text-[var(--color-text-primary)]",
     labelStyle: "text-[var(--color-text-muted)]",
     costStyle: "text-[var(--color-text-muted)] font-mono",
-    progressStyle: "h-1 bg-[var(--color-background-tertiary)] rounded-full overflow-hidden",
+    progressStyle: "h-1 bg-[var(--color-surface-sunken)] rounded-full overflow-hidden",
     progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
     sizes: {
         sm: {

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

@@ -353,9 +353,9 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 originY: isNegative ? 0 : 1,
                 transformOrigin: isNegative ? "top" : "bottom",
                 fill: isNull
-                    ? "var(--color-background-tertiary)"
+                    ? "var(--color-surface-sunken)"
                     : shouldReduceOpacity
-                        ? "var(--color-background-tertiary)"
+                        ? "var(--color-surface-sunken)"
                         : fillColor,
                 opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
                 stroke: isFocused ? "var(--color-primary)" : "none",

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

@@ -234,7 +234,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                         originY: 1,
                         transformOrigin: "bottom",
                         fill: shouldReduceOpacity
-                            ? "var(--color-background-tertiary)"
+                            ? "var(--color-surface-sunken)"
                             : fillColor,
                         opacity: shouldReduceOpacity ? 0.9 : 1,
                         stroke: isFocused ? "var(--color-primary)" : "none",

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

@@ -148,9 +148,9 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
                 originY: isNegative ? 0 : 1,
                 transformOrigin: isNegative ? "top" : "bottom",
                 fill: isNull
-                    ? "var(--color-background-tertiary)"
+                    ? "var(--color-surface-sunken)"
                     : shouldReduceOpacity
-                        ? "var(--color-background-tertiary)"
+                        ? "var(--color-surface-sunken)"
                         : fillColor,
                 opacity: !isNull && shouldReduceOpacity ? 0.9 : 1,
                 stroke: isFocused ? "var(--color-primary)" : "none",

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

@@ -10,7 +10,7 @@ const breadcrumbsTheme = {
     link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
     current: "text-[var(--color-text-primary)] font-medium",
     separator: "text-[var(--color-text-muted)] select-none",
-    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
+    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-surface-hover)]",
 };
 /**
  * Variant styles for different breadcrumb appearances

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

@@ -107,7 +107,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "link" &&
                 resolvedVariant !== "ghost" &&
-                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60 blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
                 ripples.map((ripple) => {
                     const animation = getRippleAnimation(effect, ripple, rippleScale);
                     return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||

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

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

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

@@ -3,7 +3,7 @@ const calendarMiniTheme = {
     monthRowStyle: "flex flex-1 gap-4 overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory px-4 ml-3",
     monthItemStyle: "font-semibold text-[var(--color-text-secondary)] cursor-pointer transition-colors hover:text-[var(--color-text-primary)] flex-shrink-0 snap-center data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:opacity-100",
     dateRowStyle: "relative overflow-hidden px-4 py-0.5",
-    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-background-secondary)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-background-secondary)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-background-secondary)]",
+    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-background-secondary)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-background-secondary)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-background-secondary)]",
 };
 
 export { calendarMiniTheme };

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

@@ -11,7 +11,7 @@ const contextMenuTheme = {
     itemCheckedStyle: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-primary)] " +
         "dark:text-[var(--color-neutral-200)]",
     // Submenu trigger - based on Dropdown item style with chevron space
-    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-background-tertiary)] ` +
+    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-surface-hover)] ` +
         "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
     // 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)] " +

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

@@ -1,10 +1,10 @@
 const drawerTheme = {
     // Note: overlay styling is now handled by the shared Overlay component
     overlay: "",
-    container: "fixed bg-white shadow-2xl shadow-black/30 " +
+    container: "fixed bg-[var(--color-surface-raised)] shadow-2xl shadow-black/30 " +
         "border border-[var(--color-border)] ring-4 ring-white/10 " +
         "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
-        "dark:bg-[var(--color-background-secondary)] dark:ring-white/5",
+        "dark:bg-[var(--color-surface-raised)] dark:ring-white/5",
     inner: "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",

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

@@ -2,8 +2,8 @@ import { menuItemTheme } from '../MenuItem/MenuItem.theme.js';
 
 const dropdownTheme = {
     // Menu container - similar to Popover but with menu-specific styling
-    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-white shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
-        "dark:bg-[var(--color-background-secondary)]",
+    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-[var(--color-surface-overlay)] shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
+        "dark:bg-[var(--color-surface-overlay)]",
     // Delegate item styles to shared MenuItem theme
     itemBaseStyle: menuItemTheme.baseStyle,
     itemDangerStyle: menuItemTheme.dangerStyle,

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

@@ -11,7 +11,7 @@ const Empty = React__default.forwardRef(({ title, subtitle, image, imageAlt, ico
     if (children) {
         return (jsx("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: emptyTheme.subtitleStyle, children: subtitle }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
+    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto flex items-center justify-center text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: emptyTheme.subtitleStyle, children: subtitle }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
 });
 // Set display name for dev tools and Storybook
 Empty.displayName = "Empty";

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ImagePlaceholderProps } from "./ImagePlaceholder.types";
+/**
+ * ImagePlaceholder renders a striped placeholder surface used when a
+ * header / banner / cover image has not yet been uploaded.
+ *
+ * @example
+ * ```tsx
+ * <ImagePlaceholder ratio={16 / 9}>
+ *   <Button>Upload cover</Button>
+ * </ImagePlaceholder>
+ * ```
+ */
+export declare const ImagePlaceholder: React.ForwardRefExoticComponent<ImagePlaceholderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { AspectRatio } from '../AspectRatio/AspectRatio.js';
+import { StripePattern } from '../../effects/StripePattern/StripePattern.js';
+import { imagePlaceholderTheme } from './ImagePlaceholder.theme.js';
+
+/**
+ * ImagePlaceholder renders a striped placeholder surface used when a
+ * header / banner / cover image has not yet been uploaded.
+ *
+ * @example
+ * ```tsx
+ * <ImagePlaceholder ratio={16 / 9}>
+ *   <Button>Upload cover</Button>
+ * </ImagePlaceholder>
+ * ```
+ */
+const ImagePlaceholder = React__default.forwardRef(({ ratio = 16 / 9, bordered = true, rounded = true, pattern, children, className, ...rest }, ref) => {
+    const surface = (jsxs("div", { ref: ref, className: cn(imagePlaceholderTheme.surfaceStyle, rounded && imagePlaceholderTheme.roundedStyle, bordered && imagePlaceholderTheme.borderedStyle, className), ...rest, children: [jsx(StripePattern, { ...pattern }), children !== undefined && (jsx("div", { className: imagePlaceholderTheme.contentStyle, children: children }))] }));
+    if (ratio === undefined) {
+        return surface;
+    }
+    return jsx(AspectRatio, { ratio: ratio, children: surface });
+});
+ImagePlaceholder.displayName = "ImagePlaceholder";
+
+export { ImagePlaceholder };

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.theme.d.ts

@@ -0,0 +1,6 @@
+export declare const imagePlaceholderTheme: {
+    surfaceStyle: string;
+    borderedStyle: string;
+    roundedStyle: string;
+    contentStyle: string;
+};

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

@@ -0,0 +1,8 @@
+const imagePlaceholderTheme = {
+    surfaceStyle: "relative w-full h-full overflow-hidden bg-[var(--color-background-secondary)]",
+    borderedStyle: "border border-dashed border-[var(--color-border)]",
+    roundedStyle: "rounded-[var(--card-rounded)]",
+    contentStyle: "absolute inset-0 z-10 flex items-center justify-center text-[var(--color-text-muted)]",
+};
+
+export { imagePlaceholderTheme };

package/dist/components/core/ImagePlaceholder/ImagePlaceholder.types.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { StripePatternProps } from "../../effects/StripePattern";
+export interface ImagePlaceholderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Aspect ratio (width / height) for the placeholder surface.
+     * Pass `undefined` to skip the AspectRatio wrapper and let the parent
+     * control the height (e.g. when used inside a fixed-height container).
+     * @default 16/9
+     */
+    ratio?: number;
+    /**
+     * Show the dashed outer border.
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Apply rounded corners.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Override props passed to the inner StripePattern (color, spacing, angle, etc.).
+     */
+    pattern?: Partial<StripePatternProps>;
+    /**
+     * Optional content rendered above the striped surface (e.g. an icon,
+     * caption, or upload button).
+     */
+    children?: React.ReactNode;
+    /** className override on the outer surface (shadcn pattern). */
+    className?: string;
+}

package/dist/components/core/ImagePlaceholder/index.d.ts

@@ -0,0 +1,2 @@
+export { ImagePlaceholder } from "./ImagePlaceholder";
+export type { ImagePlaceholderProps } from "./ImagePlaceholder.types";

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

@@ -54,7 +54,7 @@ const messageTheme = {
     linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-xs max-w-xs",
     // Reactions styles
     reactionsContainerStyle: "flex flex-wrap items-center gap-1.5 mt-1.5",
-    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-background-tertiary)]",
+    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-surface-hover)]",
     reactionPillActiveStyle: "border-[var(--color-primary-200)] bg-[var(--color-primary-50)] text-[var(--color-primary)]",
     // Reply/quote styles
     replyStyle: "border-l-2 border-[var(--color-border)] pl-2.5 mb-2 text-xs text-[var(--color-text-muted)]",

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

@@ -3,7 +3,7 @@ const modalTheme = {
     overlay: "",
     container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden",
     containerVariants: {
-        default: "bg-white ring-4 !ring-white/10 dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)]",
+        default: "bg-[var(--color-surface-raised)] ring-4 !ring-white/10 dark:bg-[var(--color-surface-raised)] border border-[var(--color-border)]",
         translucent: "bg-gradient-to-b from-[var(--color-background)]/90 to-[var(--color-background)]/70 backdrop-blur-xl ring-4 ring-white/20 border-t border-[var(--color-border)]",
     },
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",

package/dist/components/core/NavItem/NavItem.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NavItemProps } from "./NavItem.types";
-export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLElement>>;