@rebasepro/ui 0.10.1-canary.d8d45b2 → 0.10.1-canary.ed8caed

package/dist/icons/index.d.ts

@@ -5,4 +5,4 @@ export * from "./GitHubIcon";
 export * from "./HandleIcon";
 export type { LucideProps, LucideIcon } from "lucide-react";
 export { icons as lucideIcons } from "lucide-react";
-export { AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageOffIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGridIcon, LinkIcon, Link2Icon, ListIcon, LockIcon, ListOrderedIcon, LoaderIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, VideoIcon, VoteIcon, Wand2Icon, XCircleIcon, XIcon } from "lucide-react";
+export { AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageOffIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGridIcon, LinkIcon, Link2Icon, Unlink2Icon, ListIcon, LockIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, LoaderIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TrendingUpIcon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon } from "lucide-react";

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { AlertCircleIcon, AlertCircleIcon as AlertCircleIcon$1, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftIcon as ArrowLeftIcon$1, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CalendarIcon as CalendarIcon$1, CheckCircleIcon, CheckIcon, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronLeftIcon, ChevronLeftIcon as ChevronLeftIcon$1, ChevronRightIcon, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon, ChevronUpIcon as ChevronUpIcon$1, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterIcon as FilterIcon$1, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageIcon as ImageIcon$1, ImageOffIcon, InfoIcon, ItalicIcon, Kanban, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGrid, LayoutGridIcon, LayoutList, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MinusCircleIcon, MinusIcon, MinusIcon as MinusIcon$1, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RefreshCwIcon as RefreshCwIcon$1, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SearchIcon as SearchIcon$1, SendIcon, Settings2, SettingsIcon, ShieldAlertIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Table2, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, VideoIcon, VoteIcon, Wand2Icon, XCircleIcon, XIcon, XIcon as XIcon$1, icons as lucideIcons } from "lucide-react";
+import { AlertCircleIcon, AlertCircleIcon as AlertCircleIcon$1, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftIcon as ArrowLeftIcon$1, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpIcon as ArrowUpIcon$1, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CalendarIcon as CalendarIcon$1, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronLeftIcon, ChevronLeftIcon as ChevronLeftIcon$1, ChevronRightIcon, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon, ChevronUpIcon as ChevronUpIcon$1, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterIcon as FilterIcon$1, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageIcon as ImageIcon$1, ImageOffIcon, InfoIcon, ItalicIcon, Kanban, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGrid, LayoutGridIcon, LayoutList, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, LoaderIcon, LockIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MessageCircleIcon, MinusCircleIcon, MinusIcon, MinusIcon as MinusIcon$1, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RefreshCwIcon as RefreshCwIcon$1, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SearchIcon as SearchIcon$1, SendIcon, Settings2, SettingsIcon, ShieldAlertIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Table2, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TrendingUpIcon, TypeIcon, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, XIcon as XIcon$1, icons as lucideIcons } from "lucide-react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -174,19 +174,19 @@ function getColorSchemeForSeed(seed) {
 //#region src/components/common/SelectInputLabel.tsx
 function SelectInputLabel({ children, error }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cls("text-sm  font-medium ml-3.5 mb-1", error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300"),
+		className: cls("text-sm font-medium ml-3.5 mb-1", error ? "text-red-600 dark:text-red-500" : "text-surface-accent-500 dark:text-surface-accent-300"),
 		children
 	});
 }
 //#endregion
 //#region src/styles.ts
 var focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-var focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
+var focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
 var focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
-var fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
-var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
-var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
-var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+var fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055]";
+var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
+var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
+var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
 var defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
 var paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
 var cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
@@ -420,7 +420,7 @@ function Autocomplete({ children, open, setOpen, className }) {
 }
 var AutocompleteItem = React.memo(function AutocompleteItem({ children, onClick, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className),
+		className: cls("flex w-full items-center h-[48px] cursor-pointer transition-colors duration-150 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className),
 		onClick,
 		children
 	});
@@ -2582,14 +2582,14 @@ var AvatarInner = ({ src, alt, children, className, style, outerClassName, hover
 		ref,
 		style,
 		...props,
-		className: cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", hover && "hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700", outerClassName),
+		className: cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", hover && "transition-colors duration-150 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", outerClassName),
 		children: src && !isImageError ? /* @__PURE__ */ jsx("img", {
 			className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className),
 			src,
 			alt,
 			onError: handleImageError
 		}) : /* @__PURE__ */ jsx("span", {
-			className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full", className),
+			className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-text-primary-dark rounded-full", className),
 			children
 		})
 	});
@@ -2621,7 +2621,7 @@ var BooleanSwitch = React.forwardRef(function BooleanSwitch({ value, allowIndete
 			"translate-x-[10px]": size === "medium" || size === "large",
 			"translate-x-[9px]": size === "small",
 			"translate-x-[8px]": size === "smallest"
-		}) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-300 dark:bg-surface-700" : value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
+		}) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
 			"w-[21px] h-[21px]": size === "medium" || size === "large",
 			"w-[19px] h-[19px]": size === "small",
 			"w-[16px] h-[16px]": size === "smallest",
@@ -2657,7 +2657,7 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 		"aria-disabled": disabled || void 0,
 		"aria-labelledby": label ? switchLabelId : void 0,
 		tabIndex: -1,
-		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-black/30", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-black/20" : "hover:bg-surface-accent-200/70 hover:dark:bg-black/50"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
+		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055]", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-white/[0.03]" : "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
@@ -2777,7 +2777,7 @@ var containerMaxWidths = {
 var ContainerInner = ({ children, className, style, maxWidth = "7xl" }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: cls("mx-auto px-3 md:px-4 lg-px-6", maxWidth ? containerMaxWidths[maxWidth] : "", className),
+		className: cls("mx-auto px-3 md:px-4 lg:px-6", maxWidth ? containerMaxWidths[maxWidth] : "", className),
 		style,
 		children
 	});
@@ -2962,7 +2962,7 @@ var ErrorBoundary = class extends React.Component {
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center m-2",
 				children: [/* @__PURE__ */ jsx(AlertCircleIcon$1, {
-					className: "text-red-500",
+					className: "text-red-500 dark:text-red-400",
 					size: iconSize.small
 				}), /* @__PURE__ */ jsx("div", {
 					className: "ml-4",
@@ -2986,7 +2986,7 @@ var ErrorBoundary = class extends React.Component {
 				className: "flex flex-col items-center max-w-md px-6 py-10 text-center",
 				children: [
 					/* @__PURE__ */ jsx("div", {
-						className: cls("flex items-center justify-center w-14 h-14 rounded-2xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : "bg-red-100 dark:bg-red-900/30"),
+						className: cls("flex items-center justify-center w-14 h-14 rounded-xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : "bg-red-100 dark:bg-red-900/30"),
 						children: /* @__PURE__ */ jsx(Icon, {
 							size: 28,
 							className: isPermission ? "text-amber-600 dark:text-amber-400" : "text-red-500 dark:text-red-400"
@@ -3025,7 +3025,7 @@ var ErrorBoundary = class extends React.Component {
 							className: cls("flex items-center gap-1 mx-auto text-xs", "text-text-disabled dark:text-text-disabled-dark", "hover:text-text-secondary dark:hover:text-text-secondary-dark", "transition-colors cursor-pointer bg-transparent border-none p-0"),
 							children: ["Technical details", showDetails ? /* @__PURE__ */ jsx(ChevronUpIcon$1, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDownIcon$1, { size: 14 })]
 						}), showDetails && /* @__PURE__ */ jsx("div", {
-							className: cls("mt-3 p-3 rounded-lg text-left text-xs", "bg-surface-100 dark:bg-surface-800", "text-text-secondary dark:text-text-secondary-dark", "font-mono break-all"),
+							className: cls("mt-3 p-3 rounded-lg text-left text-xs", "bg-surface-100 dark:bg-surface-800/50", "text-text-secondary dark:text-text-secondary-dark", "font-mono break-all"),
 							children: error.message
 						})]
 					})
@@ -3037,10 +3037,10 @@ var ErrorBoundary = class extends React.Component {
 //#endregion
 //#region src/components/Checkbox.tsx
 var sizeClasses$2 = {
-	large: "w-6 h-6 rounded flex items-center justify-center",
-	medium: "w-5 h-5 rounded flex items-center justify-center",
-	small: "w-4 h-4 rounded flex items-center justify-center",
-	smallest: "w-4 h-4 rounded flex items-center justify-center"
+	large: "w-6 h-6 rounded-md flex items-center justify-center",
+	medium: "w-5 h-5 rounded-md flex items-center justify-center",
+	small: "w-4 h-4 rounded-md flex items-center justify-center",
+	smallest: "w-4 h-4 rounded-md flex items-center justify-center"
 };
 var outerSizeClasses = {
 	medium: "w-10 h-10",
@@ -3067,6 +3067,7 @@ var Checkbox = React.memo(({ id, checked, indeterminate = false, padding = true,
 		disabled,
 		"aria-label": ariaLabel,
 		"aria-checked": indeterminate ? "mixed" : isChecked,
+		className: "rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
 		onCheckedChange: disabled ? void 0 : onCheckedChange,
 		children: /* @__PURE__ */ jsx("div", {
 			className: cls(padding ? paddingClasses[size] : "", outerSizeClasses[size], "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "", onCheckedChange ? "cursor-pointer" : "cursor-default"),
@@ -3176,7 +3177,7 @@ var Tooltip = ({ open, defaultOpen, side = "bottom", delayDuration = 200, sideOf
 			children: [trigger, /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
 				container: finalContainer,
 				children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
-					className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName),
+					className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName),
 					style: tooltipStyle,
 					sideOffset: sideOffset === void 0 ? 4 : sideOffset,
 					align,
@@ -3289,7 +3290,7 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 			type: "button",
 			disabled,
 			onClick: () => onChange(void 0),
-			className: cls("flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors", "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", disabled && "opacity-50 cursor-not-allowed", !value && "bg-surface-accent-100 dark:bg-surface-accent-800 font-medium"),
+			className: cls("flex items-center gap-2 px-2 py-1 rounded-lg text-sm transition-colors duration-150", "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", disabled && "opacity-50 cursor-not-allowed", !value && "bg-surface-accent-100 dark:bg-surface-accent-800 font-medium"),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cls(swatchSize, "rounded-full border-2 border-dashed border-surface-accent-400 dark:border-surface-accent-600", "flex items-center justify-center"),
 				children: !value && /* @__PURE__ */ jsx(CheckIcon$1, { size: checkSize })
@@ -3311,7 +3312,7 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 						type: "button",
 						disabled,
 						onClick: () => onChange(colorKey),
-						className: cls(swatchSize, "rounded-full transition-all flex items-center justify-center", "hover:scale-110 hover:shadow-md", "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1", disabled && "opacity-50 cursor-not-allowed hover:scale-100", isSelected && "ring-2 ring-primary ring-offset-1"),
+						className: cls(swatchSize, "rounded-full transition-all flex items-center justify-center", "hover:scale-110 hover:shadow-md", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1", disabled && "opacity-50 cursor-not-allowed hover:scale-100", isSelected && "ring-2 ring-primary ring-offset-1"),
 						style: { backgroundColor: colorScheme.color },
 						"aria-label": displayName,
 						"aria-pressed": isSelected,
@@ -3328,8 +3329,8 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 //#endregion
 //#region src/components/IconButton.tsx
 var buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
-var baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
-var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
+var baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150";
+var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
 var sizeClasses$1 = {
 	medium: "w-10 !h-10 min-w-10 min-h-10",
 	small: "w-8 !h-8 min-w-8 min-h-8",
@@ -3475,7 +3476,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("style", { children: inputStyles }),
 		/* @__PURE__ */ jsxs("div", {
-			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-black/30", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055]", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
 				"min-h-[28px]": size === "smallest",
 				"min-h-[32px]": size === "small",
 				"min-h-[44px]": size === "medium",
@@ -3605,7 +3606,7 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 					"aria-describedby": ariaDescribedby,
 					className: cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out"),
 					children: /* @__PURE__ */ jsx("div", {
-						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-surface-accent-900 dark:text-white", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
+						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-text-primary dark:text-text-primary-dark", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
 						children
 					})
 				})]
@@ -3701,7 +3702,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		children: [/* @__PURE__ */ jsx(Collapsible.Trigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200 dark:border-surface-700/60 ", asField && "bg-surface-accent-200/50 dark:bg-black/30", titleClassName, "cursor-pointer"),
+				className: cls("rounded-t-lg flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200 dark:border-surface-700/60 ", asField && "bg-surface-accent-200/50 dark:bg-white/[0.055]", titleClassName, "cursor-pointer"),
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": open,
@@ -3794,12 +3795,12 @@ var FilterChip = React.forwardRef(function FilterChip({ children, active = false
 //#endregion
 //#region src/components/InfoLabel.tsx
 var colorClasses = {
-	info: "bg-sky-200 dark:bg-teal-900",
-	warn: "bg-orange-200 dark:bg-yellow-950"
+	info: "bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25",
+	warn: "bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25"
 };
 function InfoLabel({ children, mode = "info" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cls("my-3 py-2 px-4 rounded-xs", colorClasses[mode]),
+		className: cls("my-3 py-2 px-4 rounded-lg text-sm font-medium leading-snug", colorClasses[mode]),
 		children
 	});
 }
@@ -3890,7 +3891,7 @@ var Menu = React.forwardRef(({ children, trigger, open, defaultOpen, side, align
 });
 Menu.displayName = "Menu";
 var MenuItem = React.memo(({ children, dense = false, disabled = false, onClick, className }) => {
-	const classNames = cls(onClick && !disabled && "cursor-pointer", disabled && "opacity-50 cursor-not-allowed", "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4", !disabled && "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900", dense ? "px-4 py-1.5" : "px-4 py-2", className);
+	const classNames = cls(onClick && !disabled && "cursor-pointer", disabled && "opacity-50 cursor-not-allowed", "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4 transition-colors duration-150", !disabled && "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900", dense ? "px-4 py-1.5" : "px-4 py-2", className);
 	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
 		className: classNames,
 		disabled,
@@ -3904,7 +3905,7 @@ MenuItem.displayName = "MenuItem";
 function Menubar({ children, onSelect, className }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
 		onSelect,
-		className: cls("z-10 flex bg-white dark:bg-surface-900 p-[3px] rounded-sm shadow-sm", className),
+		className: cls("z-10 flex bg-white dark:bg-surface-900 p-[3px] rounded-lg shadow-sm", className),
 		children
 	});
 }
@@ -3914,7 +3915,7 @@ function MenubarMenu({ children }) {
 function MenubarTrigger({ children, onSelect, className }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
 		onSelect,
-		className: cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800", className),
+		className: cls("py-2 px-3 outline-none select-none font-medium leading-none rounded-md text-text-primary dark:text-text-primary-dark text-sm transition-colors duration-150 flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800", className),
 		children
 	});
 }
@@ -3940,7 +3941,7 @@ function MenubarContent({ children, className, align, sideOffset, alignOffset, o
 function MenubarItem({ children, leftPadding, className, disabled, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
 		onSelect,
-		className: cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", leftPadding ? "pl-5" : "", disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark", className),
+		className: cls("group text-sm leading-none rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", leftPadding ? "pl-5" : "", disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark", className),
 		disabled,
 		...rest,
 		children
@@ -3962,7 +3963,7 @@ function MenubarSub({ children, ...rest }) {
 function MenubarSubTrigger({ children, className, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.SubTrigger, {
 		onSelect,
-		className: cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		className: cls("group text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
 		...rest,
 		children
 	});
@@ -3979,7 +3980,7 @@ function MenubarSubContent({ children, alignOffset, className, onSelect, ...rest
 function MenubarCheckboxItem({ children, checked, onCheckedChange, className, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.CheckboxItem, {
 		onSelect,
-		className: cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
 		checked,
 		onCheckedChange,
 		...rest,
@@ -4006,7 +4007,7 @@ function MenubarRadioGroup({ children, className, value, onValueChange, onSelect
 function MenubarRadioItem({ children, className, value, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.RadioItem, {
 		onSelect,
-		className: cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
 		value,
 		...rest,
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon$1, { size: iconSize.small })
@@ -4219,7 +4220,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 							children: "No results found."
 						}), /* @__PURE__ */ jsxs(Command.Group, { children: [includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, {
 							onSelect: toggleAll,
-							className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"),
+							className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"),
 							children: [/* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }), /* @__PURE__ */ jsx("span", {
 								className: "text-sm text-text-secondary dark:text-text-secondary-dark",
 								children: "(Select All)"
@@ -4245,7 +4246,7 @@ var MultiSelectItem = React$1.memo(function MultiSelectItem({ children, value, c
 		onSelect: (_) => {
 			onItemClick(value);
 		},
-		className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", className),
+		className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", className),
 		children: [/* @__PURE__ */ jsx(InnerCheckBox, { checked: isSelected }), children]
 	});
 });
@@ -4253,7 +4254,7 @@ var InnerCheckBox = React$1.memo(function InnerCheckBox({ checked }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cls("p-2", "w-8 h-8", "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150"),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cls("border-2 relative transition-colors ease-in-out duration-150", "w-4 h-4 rounded flex items-center justify-center", checked ? "bg-primary" : "bg-white dark:bg-surface-accent-900", checked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200"),
+			className: cls("border-2 relative transition-colors ease-in-out duration-150", "w-4 h-4 rounded-sm flex items-center justify-center", checked ? "bg-primary" : "bg-white dark:bg-surface-accent-900", checked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200"),
 			children: checked && /* @__PURE__ */ jsx(CheckIcon$1, {
 				size: iconSize.smallest,
 				className: "absolute"
@@ -4283,11 +4284,11 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React$1.forwardRef(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
 		ref,
-		className: cls("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: cls("aspect-square h-4 w-4 rounded-full border border-primary text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
 			className: "flex items-center justify-center",
-			children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg" })
+			children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 fill-current text-current bg-primary rounded-full" })
 		})
 	});
 });
@@ -4620,7 +4621,7 @@ function SliderThumb(props) {
 		}), /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 			side: "top",
 			sideOffset: 5,
-			className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"),
+			className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"),
 			children: props.props.value?.[props.index]
 		})]
 	});
@@ -5022,7 +5023,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showLeftScroll,
 					"aria-label": "Scroll tabs left",
 					onClick: () => scroll("left"),
-					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
+					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon$1, { size: iconSize.smallest })
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -5043,7 +5044,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showRightScroll,
 					"aria-label": "Scroll tabs right",
 					onClick: () => scroll("right"),
-					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
+					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
 					children: /* @__PURE__ */ jsx(ChevronRightIcon$1, { size: iconSize.smallest })
 				})
 			]
@@ -5055,14 +5056,14 @@ function Tab({ value, className, innerClassName, children, disabled }) {
 	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
 		value,
 		disabled,
-		className: cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", variant === "standard" && "rounded-sm px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50", variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-[12px] font-medium transition-colors group relative box-border overflow-hidden", "border-b-2 border-b-transparent", "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "data-[state=active]:border-b-primary", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"), variant === "pill" && cls("px-2 py-0.5 rounded text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-blue-400", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName),
+		className: cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50", variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-xs font-medium transition-colors group relative box-border overflow-hidden", "border-b-2 border-b-transparent", "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "data-[state=active]:border-b-primary", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"), variant === "pill" && cls("px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName),
 		children
 	});
 }
 //#endregion
 //#region src/components/Table.tsx
 var Table = React.memo(({ children, className, style, ...rest }) => /* @__PURE__ */ jsx("table", {
-	className: cls("text-left text-surface-900 dark:text-white rounded-lg overflow-x-auto", className),
+	className: cls("text-left text-text-primary dark:text-text-primary-dark rounded-lg overflow-x-auto", className),
 	style,
 	...rest,
 	children
@@ -5082,7 +5083,7 @@ var TableHeader = React.memo(({ children, className, ...rest }) => /* @__PURE__
 var TableRow = React.memo(({ children, className, onClick, style, ...rest }) => /* @__PURE__ */ jsx("tr", {
 	onClick,
 	style,
-	className: cls("bg-white dark:bg-surface-900", onClick ? "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer" : "", className),
+	className: cls("bg-white dark:bg-surface-900", onClick ? "transition-colors duration-150 hover:bg-primary/5 cursor-pointer" : "", className),
 	...rest,
 	children
 }));
@@ -5149,7 +5150,7 @@ function Popover({ trigger, children, open, onOpenChange, side, sideOffset = 5,
 				avoidCollisions,
 				onMouseEnter,
 				onMouseLeave,
-				children: [children, /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-white dark:fill-surface-800" })]
+				children: [children, /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-white dark:fill-surface-900" })]
 			})
 		})]
 	});
@@ -5356,7 +5357,7 @@ function ToggleButtonGroup({ value, onValueChange, options, className }) {
 			disabled: option.disabled,
 			"aria-pressed": value === option.value,
 			"aria-disabled": option.disabled || void 0,
-			className: cls("flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors", value === option.value ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300 shadow-sm" : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700", option.disabled && "opacity-50 cursor-not-allowed"),
+			className: cls("flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", value === option.value ? "bg-white dark:bg-surface-700 text-primary dark:text-primary-300 shadow-sm" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-800", option.disabled && "opacity-50 cursor-not-allowed"),
 			children: [option.icon, /* @__PURE__ */ jsx("span", {
 				className: "text-sm font-medium",
 				children: option.label
@@ -5422,15 +5423,15 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 							onColumnSort(column.key);
 						},
 						children: [
-							!sort && /* @__PURE__ */ jsx(ArrowUpIcon, {
+							!sort && /* @__PURE__ */ jsx(ArrowUpIcon$1, {
 								size: 14,
 								className: "flex-shrink-0"
 							}),
-							sort === "asc" && /* @__PURE__ */ jsx(ArrowUpIcon, {
+							sort === "asc" && /* @__PURE__ */ jsx(ArrowUpIcon$1, {
 								size: 14,
 								className: "flex-shrink-0"
 							}),
-							sort === "desc" && /* @__PURE__ */ jsx(ArrowUpIcon, {
+							sort === "desc" && /* @__PURE__ */ jsx(ArrowUpIcon$1, {
 								size: 14,
 								className: "flex-shrink-0 rotate-180"
 							})
@@ -7926,7 +7927,7 @@ function CollectionCardView({ dataController, properties, propertiesOrder, idPro
 					src: imageValue,
 					alt: "",
 					className: "w-full h-32 object-cover rounded-t-lg"
-				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-accent-200/50 dark:bg-black/30") })),
+				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-accent-200/50 dark:bg-white/[0.055]") })),
 				selectionEnabled && /* @__PURE__ */ jsx("div", {
 					className: "absolute top-2 right-2",
 					onClick: (e) => e.stopPropagation(),
@@ -8460,6 +8461,6 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 	});
 }
 //#endregion
-export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CalendarIcon, Card, CardView, CenteredView, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionCardView, CollectionKanbanView, CollectionListView, CollectionTableView, CollectionView, CollectionViewToolbar, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, DefaultCellRenderer, Dialog, DialogActions, DialogContent, DialogTitle, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftIcon, Paper, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectInputLabel, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, VirtualTable as TableView, VirtualTable, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TypeIcon, Typography, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, VideoIcon, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, lucideIcons, paperMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
+export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionCardView, CollectionKanbanView, CollectionListView, CollectionTableView, CollectionView, CollectionViewToolbar, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, DefaultCellRenderer, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectInputLabel, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, VirtualTable as TableView, VirtualTable, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, lucideIcons, paperMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
 
 //# sourceMappingURL=index.es.js.map