@caffeinebounce/ui 0.62.3 → 0.63.0

package/dist/index.mjs

@@ -1,42 +1,51 @@
 "use client";
-export { AppleCard, AppleCardsCarousel, BackgroundRippleEffect, BenefitsSection, CTAWithDashedGridLines, Carousel, CtaWithDashedGridLines, EditorialHero, FaqAccordion, GlowingEffect, HeroSection, HeroSectionWithRipple, ImpactSection, LampContainer, LampHero, MarketingProse, MediaTextHero, MetricStory, MissionSection, NextStepsSection, PageHero, PartnerLogoGrid, PixelatedCanvas, ProgramCard, RollingBackground, SectionShell, StackedIsometricFeatures, TeamCard, TestimonialsSection, TextGenerateEffect } from './chunk-6DVWMJ3H.mjs';
-export { FormWizard, useFormWizardNavigation } from './chunk-YSLD2HLP.mjs';
-export { PageHeader, SettingsLayout, SettingsRow, SettingsSection, SettingsTabContent, SettingsTabs } from './chunk-OLAAXLXY.mjs';
-import { Textarea, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './chunk-N6AFNFZR.mjs';
-export { Checkbox, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, PasswordInput, PasswordRequirements, Textarea, VerificationCodeInput, defaultPasswordRules, extendedPasswordRules } from './chunk-N6AFNFZR.mjs';
-import { Badge } from './chunk-GUSTCU2W.mjs';
-export { Alert, AlertDescription, AlertTitle, Badge, badgeVariants } from './chunk-GUSTCU2W.mjs';
+export { AppSwitcher, ComingSoonButton, EntitySwitcher, Footer, MarketingHeaderPreset, Navbar, NavbarLogo, NavbarUserMenu, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPrimitive, NavigationMenuTrigger, NavigationMenuViewport, NavigationMenuViewportPrimitive, NonprofitFooterPreset, RouteSegmentedSwitcher, SegmentedSwitcher, navigationMenuTriggerStyle } from './chunk-EXQSWHLD.mjs';
+export { AppleCard, AppleCardsCarousel, BackgroundRippleEffect, BenefitsSection, CTAWithDashedGridLines, Carousel, CtaWithDashedGridLines, EditorialHero, FaqAccordion, GlowingEffect, HeroSection, HeroSectionWithRipple, ImpactSection, LampContainer, LampHero, MarketingProse, MediaTextHero, MetricStory, MissionSection, NextStepsSection, PageHero, PartnerLogoGrid, PixelatedCanvas, ProgramCard, RollingBackground, SectionShell, StackedIsometricFeatures, TeamCard, TestimonialsSection, TextGenerateEffect } from './chunk-2EFVMX6V.mjs';
+export { NewsletterSignup } from './chunk-ZFLZA7UP.mjs';
+import './chunk-T5R6HUDG.mjs';
+export { FormWizard, useFormWizardNavigation } from './chunk-FFJC66KO.mjs';
+import { useSessionErrors } from './chunk-VIVWFQG5.mjs';
+export { createDataRestorationHandler, createFormResetHandler, createFormSubmitHandler, createStepHasFieldErrors, extractZodErrors, formatShortcut, getDefaultLtmRange, matchesShortcut, breakpoints as mediaBreakpoints, useBreakpoints, useComparisonData, useCopyToClipboard, useDebounce, useFinancialStatementState, useKeyboardShortcut, useLocalStorage, useMediaQuery, useSessionErrors, useStatementExport, useStatementMobileMode, useToast, useWizardForm } from './chunk-VIVWFQG5.mjs';
+export { useScrollDirection } from './chunk-G5TQWWQA.mjs';
+export { PageHeader, SettingsLayout, SettingsRow, SettingsSection, SettingsTabContent, SettingsTabs } from './chunk-6QAKQG57.mjs';
+export { Container } from './chunk-C57MX3BG.mjs';
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './chunk-7ERVZXIN.mjs';
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, PasswordInput, PasswordRequirements, VerificationCodeInput, defaultPasswordRules, extendedPasswordRules } from './chunk-7ERVZXIN.mjs';
+export { Alert, AlertDescription, AlertTitle } from './chunk-6NCRGHV3.mjs';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-YL7RZRHM.mjs';
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-YL7RZRHM.mjs';
-import { Switch, DatePicker } from './chunk-BMFQG6RA.mjs';
-export { CASH_FLOW_CHART_CONFIG, Calendar, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSelector, DataTableAddButton, DataTableExportButton, DataTablePagination, DataTableRowActions, DataTableSearch, DataTableSettings, DataTableSkeleton, DataTableSummary, DataTableToolbar, DataTableTopper, DataTableViewOptions, DataTableViews, DatePicker, DateRangePicker, FinancialStatementControls, FinancialSummaryChart, INCOME_STATEMENT_CHART_CONFIG, IconButton, MobilePeriodStepper, MobileStatementActions, MobileStatementFilters, ModernCalendar, PeriodSelector, Skeleton, AreaLineChart as SummaryAreaChart, ColumnChart as SummaryBarChart, SummaryPanel, PieChartView as SummaryPieChart, Switch, UnifiedTableControls, createFinanceTableSettingsItems, exportToCsv, exportToExcel, iconButtonVariants, normalizeUnifiedTableControls, unifiedTableControlOrder, useDataTableSettings, useUnifiedTableSettings } from './chunk-BMFQG6RA.mjs';
-import { Dialog, DialogContent, DialogClose, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-5THF4YP6.mjs';
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-5THF4YP6.mjs';
+export { DataTable, DataTableAddButton, DataTableColumnHeader, DataTableDateFilter, DataTableExportButton, DataTableFacetedFilter, DataTablePagination, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableSliderFilter, DataTableSummary, DataTableToolbar, DataTableTopper, DataTableViewOptions, DataTableViews, IconButton, Slider, dataTableConfig, exportToCsv, exportToExcel, getColumnPinningStyle, getDefaultFilterOperator, getFilterOperators, getFiltersStateParser, getSortingStateParser, getValidFilters, iconButtonVariants, useDataTable } from './chunk-RM7ACPTM.mjs';
+import './chunk-OIJ7XMDV.mjs';
 import { Label } from './chunk-KHCC5UKW.mjs';
 export { Label } from './chunk-KHCC5UKW.mjs';
-export { StudioEditor } from './chunk-72JGQ7IJ.mjs';
-export { AdminPageLayout, AppFooter, AppHeader, AppLayout, AppSidebar, AutoSaveIndicator, BackLink, BasePageLayout, ClarityAnalytics, Collapsible, CollapsibleContent, CollapsibleTrigger, DashboardGrid, FloatingUserMenu, GoogleAnalytics, GoogleTagManager, HelpLayout, HelpPageLayout, HelpPanelLayout, LegalLayout, LegalSection, MarketingLayout, ProgressBar, RootLayout, Stepper, ThemeToggle, TimeEstimate, Toaster, UserPageLayout, WizardLayout, isNavDivider, isNavItem, isNavSection, themeScript, useTheme } from './chunk-DTVWRRFN.mjs';
-export { Tabs, TabsContent, TabsList, TabsTrigger } from './chunk-GMBGWOCR.mjs';
-export { ChartContainer, ChartTooltip, ChartTooltipContent } from './chunk-Q52ZEL62.mjs';
-import { useSessionErrors } from './chunk-KB7UXIQZ.mjs';
-export { createDataRestorationHandler, createFormResetHandler, createFormSubmitHandler, createStepHasFieldErrors, extractZodErrors, formatShortcut, getDefaultLtmRange, matchesShortcut, breakpoints as mediaBreakpoints, useBreakpoints, useComparisonData, useCopyToClipboard, useDebounce, useFinancialStatementState, useKeyboardShortcut, useLocalStorage, useMediaQuery, useSessionErrors, useStatementExport, useStatementMobileMode, useToast, useWizardForm } from './chunk-KB7UXIQZ.mjs';
-import { useDataTableContext, Popover, PopoverAnchor, PopoverContent } from './chunk-7DHKQODW.mjs';
-export { BALANCE_SHEET_CONFIG, DataTable, DataTableColumnFilter, DataTableColumnHeader, DataTableCurrencyCell, DataTableFilterBadges, FinanceDecimalsProvider, FinanceDisplayProvider, FinancialStatementTable, INCOME_STATEMENT_CONFIG, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, buildFinancialStatementData, createFinancialStatementRowImportanceResolver, flattenStatementForExport, formatCurrencyValue, getFinancialStatementRowImportanceClassName, getUnitDivisor, getUnitLabel, getUnitSuffix, useDataTableContext, useFinanceDecimals, useFinanceDecimalsSetting, useFinanceDisplay } from './chunk-7DHKQODW.mjs';
+import { Switch, DatePicker } from './chunk-KJIX6V32.mjs';
+export { CASH_FLOW_CHART_CONFIG, ChartTooltipRow, ChartTooltipShell, ChartTooltipTitle, Combobox, ComparisonSelector, DataTableSettings, DatePicker, DateRangePicker, FinancialStatementControls, FinancialSummaryChart, INCOME_STATEMENT_CHART_CONFIG, MobilePeriodStepper, MobileStatementActions, MobileStatementFilters, ModernCalendar, PeriodSelector, AreaLineChart as SummaryAreaChart, ColumnChart as SummaryBarChart, SummaryPanel, PieChartView as SummaryPieChart, Switch, UnifiedTableControls, createFinanceTableSettingsItems, normalizeUnifiedTableControls, unifiedTableControlOrder, useDataTableSettings, useUnifiedTableSettings } from './chunk-KJIX6V32.mjs';
+export { BALANCE_SHEET_CONFIG, DataTableCurrencyCell, FinanceDecimalsProvider, FinanceDisplayProvider, FinancialStatementTable, INCOME_STATEMENT_CONFIG, buildFinancialStatementData, calculateDesktopFinancialColumnSizing, createFinancialStatementRowImportanceResolver, flattenStatementForExport, formatCurrencyValue, getFinancialStatementRowImportanceClassName, getUnitDivisor, getUnitLabel, getUnitSuffix, resolvePeriodColumns, useFinanceDecimals, useFinanceDecimalsSetting, useFinanceDisplay } from './chunk-LTLCIRZY.mjs';
+export { dataTableTopperButtonProps, dataTableTopperIconClasses, dataTableTopperOpenStateClasses, dataTableTopperResponsiveClasses } from './chunk-PFHOXDSW.mjs';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './chunk-APFEP5B7.mjs';
+import { Textarea } from './chunk-6HKJDV43.mjs';
+export { BooleanCheckbox as Checkbox, Textarea } from './chunk-6HKJDV43.mjs';
+export { Skeleton } from './chunk-UT36VNVZ.mjs';
+import { Badge } from './chunk-ULANYJ7Y.mjs';
+export { Badge, badgeVariants } from './chunk-ULANYJ7Y.mjs';
+export { Calendar, CalendarDayButton, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './chunk-ORBH4IBC.mjs';
+import { Popover, PopoverAnchor, PopoverContent } from './chunk-RODSGPBB.mjs';
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from './chunk-RODSGPBB.mjs';
+import { Dialog, DialogContent, DialogClose, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-5THF4YP6.mjs';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-5THF4YP6.mjs';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-6BUBNZPG.mjs';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './chunk-6BUBNZPG.mjs';
-export { AppSwitcher, ComingSoonButton, EntitySwitcher, Footer, MarketingHeaderPreset, Navbar, NavbarLogo, NavbarUserMenu, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPrimitive, NavigationMenuTrigger, NavigationMenuViewport, NavigationMenuViewportPrimitive, NonprofitFooterPreset, RouteSegmentedSwitcher, SegmentedSwitcher, navigationMenuTriggerStyle } from './chunk-OVNLC5RD.mjs';
-export { NewsletterSignup } from './chunk-ZFLZA7UP.mjs';
-import './chunk-T5R6HUDG.mjs';
-export { Container } from './chunk-RVEFPVZF.mjs';
-export { Avatar, AvatarFallback, AvatarImage, Kbd, KbdGroup, KeyboardShortcut, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, UserAvatarMenu, useSidebar } from './chunk-NXPEJ2UR.mjs';
+import { Button } from './chunk-VBD4Q5LL.mjs';
+export { Button, buttonVariants } from './chunk-VBD4Q5LL.mjs';
+export { StudioEditor } from './chunk-72JGQ7IJ.mjs';
+export { AdminPageLayout, AppFooter, AppHeader, AppLayout, AppSidebar, AutoSaveIndicator, BackLink, BasePageLayout, ClarityAnalytics, Collapsible, CollapsibleContent, CollapsibleTrigger, DashboardGrid, FloatingUserMenu, GoogleAnalytics, GoogleTagManager, HelpLayout, HelpPageLayout, HelpPanelLayout, LegalLayout, LegalSection, MarketingLayout, ProgressBar, RootLayout, Stepper, ThemeToggle, TimeEstimate, Toaster, UserPageLayout, WizardLayout, isNavDivider, isNavItem, isNavSection, themeScript, useTheme } from './chunk-E67IR6HU.mjs';
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Kbd, KbdGroup, KeyboardShortcut, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, UserAvatarMenu, useSidebar } from './chunk-R3X4B4JJ.mjs';
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from './chunk-DYWZ23QT.mjs';
 import { Separator } from './chunk-ZKUIUE7W.mjs';
 export { Separator } from './chunk-ZKUIUE7W.mjs';
+import { SizedSpinner } from './chunk-N5BHXWR3.mjs';
+export { SizedSpinner as Spinner, spinnerVariants } from './chunk-N5BHXWR3.mjs';
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from './chunk-FRRS2YZH.mjs';
-import { Spinner } from './chunk-HBLKVQIQ.mjs';
-export { Spinner, spinnerVariants } from './chunk-HBLKVQIQ.mjs';
-export { useScrollDirection } from './chunk-G5TQWWQA.mjs';
-import { Button } from './chunk-VBD4Q5LL.mjs';
-export { Button, buttonVariants } from './chunk-VBD4Q5LL.mjs';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './chunk-OFQLWSUR.mjs';
 import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-YKZEKJMZ.mjs';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './chunk-YKZEKJMZ.mjs';
@@ -44,6 +53,7 @@ import { Input } from './chunk-STEP6C4C.mjs';
 export { Input, inputVariants } from './chunk-STEP6C4C.mjs';
 import { getDataStateIcon, DATA_STATE_COPY, getDataStateIconClassName } from './chunk-MHZXUOGN.mjs';
 export { getAvatarGradient, getGradientIndex, getGradientPairs, resolveDataState } from './chunk-MHZXUOGN.mjs';
+export { ChartContainer, ChartTooltip, ChartTooltipContent } from './chunk-Q52ZEL62.mjs';
 import { cn } from './chunk-IMKLN273.mjs';
 export { cn } from './chunk-IMKLN273.mjs';
 import { toast } from 'sonner';
@@ -52,15 +62,16 @@ import * as React from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useId, useMemo, useContext, isValidElement, cloneElement, createElement } from 'react';
 import { useErrorLoggerSafe } from '@caffeinebounce/logger/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Check, X, ArrowLeft, MapPin, Monitor, Mail, AlertTriangle, CheckCircle2, Clock, XCircle, Camera, Send, Globe, ChevronDown, ChevronRight, HelpCircle, Pencil, Loader2, Plus, ExternalLink, GripHorizontal, Search, Info, Calendar, Minus, Circle, MessageSquare, Smartphone, Phone, ArrowUpRight, TrendingUp, TrendingDown } from 'lucide-react';
+import { Check, X, ArrowLeft, MapPin, Monitor, Mail, AlertTriangle, CheckCircle2, Clock, XCircle, Camera, Send, Globe, ChevronDown, Pencil, Loader2, Plus, ExternalLink, GripHorizontal, Search, Info, Calendar, Minus, ChevronRight, HelpCircle, Circle, MessageSquare, Smartphone, Phone, ArrowUpRight, TrendingUp, TrendingDown } from 'lucide-react';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import { cva } from 'class-variance-authority';
 export { ThemeProvider } from 'next-themes';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion, useMotionValue, useAnimationControls, useSpring, useTransform } from 'motion/react';
+import { Slot } from '@radix-ui/react-slot';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { preventWidows } from '@caffeinebounce/shared-utils';
 
@@ -128,8 +139,6 @@ function CompanyNameEditableCell({
   const [name, setName] = useState(initialName || "");
   const [dbaName, setDbaName] = useState(initialDbaName || "");
   const firstInputRef = useRef(null);
-  const context = useDataTableContext();
-  const isCompact = context?.density === "compact";
   const { isLoading, save } = useEditableCellSave();
   useEffect(() => {
     if (isEditing && firstInputRef.current) {
@@ -255,13 +264,13 @@ function CompanyNameEditableCell({
       type: "button",
       className: cn(
         "group flex w-full text-left cursor-pointer hover:bg-muted/50 px-2 -mx-2 rounded transition-colors",
-        isCompact ? "items-center" : "flex-col py-1"
+        "flex-col py-1"
       ),
       onClick: () => setIsEditing(true),
       title: "Click to edit company details",
       children: [
         /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: name }),
-        !isCompact && dbaName && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
+        dbaName && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
           "DBA: ",
           dbaName
         ] })
@@ -285,8 +294,6 @@ function EditableCell({
   );
   const inputRef = useRef(null);
   const textareaRef = useRef(null);
-  const context = useDataTableContext();
-  const isCompact = context?.density === "compact";
   const { isLoading, save } = useEditableCellSave();
   useEffect(() => {
     if (isEditing) {
@@ -465,7 +472,7 @@ function EditableCell({
       type: "button",
       className: cn(
         "group flex items-center w-full text-left gap-2 cursor-pointer hover:bg-muted/50 px-2 -mx-2 rounded transition-colors",
-        !isCompact && "min-h-[32px]"
+        "min-h-[32px]"
       ),
       onClick: () => setIsEditing(true),
       title: "Click to edit",
@@ -637,7 +644,7 @@ function MFAChallenge({
     setCodeSent(false);
   };
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "relative z-20 flex min-h-svh flex-col items-center justify-center px-6 py-12 pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(Spinner, { size: "lg" }) }) });
+    return /* @__PURE__ */ jsx("div", { className: "relative z-20 flex min-h-svh flex-col items-center justify-center px-6 py-12 pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(SizedSpinner, { size: "lg" }) }) });
   }
   if (factors.length === 0) {
     return null;
@@ -936,7 +943,7 @@ function MFARecovery({
     setLinkSent(false);
   };
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "relative z-20 flex min-h-svh flex-col items-center justify-center px-6 py-12 pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(Spinner, { size: "lg" }) }) });
+    return /* @__PURE__ */ jsx("div", { className: "relative z-20 flex min-h-svh flex-col items-center justify-center px-6 py-12 pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(SizedSpinner, { size: "lg" }) }) });
   }
   return /* @__PURE__ */ jsx(
     "div",
@@ -1561,7 +1568,7 @@ function FeedbackDialog({
     /* @__PURE__ */ jsxs(DialogFooter, { children: [
       /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
       /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, disabled: isSubmitDisabled, children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ jsx(SizedSpinner, { className: "mr-2 h-4 w-4" }),
         "Sending..."
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Send, { className: "mr-2 h-4 w-4" }),
@@ -1817,570 +1824,235 @@ function DisclosureFootnotes({
     }
   );
 }
-function HelpArticleIndex({ groups, onSelect }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-      group.icon,
-      /* @__PURE__ */ jsx("h3", { className: "font-medium", children: group.title })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.articles.map((article) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onSelect(article.slug),
-        className: "w-full text-left p-2 rounded hover:bg-accent transition-colors flex items-center justify-between group",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm", children: article.title }),
-          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" })
-        ]
-      },
-      article.slug
-    )) })
-  ] }, index)) });
-}
-function HelpArticleView({
-  article,
-  onNavigate,
-  onBackToIndex,
-  relatedArticles = [],
-  isLoading = false,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mb-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onBackToIndex,
-            className: "capitalize hover:text-foreground hover:underline transition-colors cursor-pointer",
-            children: article.category
-          }
-        ),
-        article.subcategory && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
-          /* @__PURE__ */ jsx("span", { className: "capitalize", children: article.subcategory })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: article.title }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: article.description })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none prose-headings:font-semibold prose-a:text-primary hover:prose-a:underline [&>*:first-child]:mt-0", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { className: "size-6" }) }) : children ? children : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Failed to load article content. Please try again later." }) }),
-    article.tags && article.tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Tags" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: article.tags.map((tag) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "inline-flex px-2 py-0.5 text-xs rounded-full bg-muted",
-          children: tag
-        },
-        tag
-      )) })
-    ] }),
-    relatedArticles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Related Articles" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: relatedArticles.map((related) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onNavigate(related.slug),
-          className: "w-full text-left p-2 rounded border hover:bg-accent transition-colors text-sm",
-          children: /* @__PURE__ */ jsx("p", { className: "font-medium", children: related.title })
-        },
-        related.slug
-      )) })
-    ] })
-  ] });
-}
-var HelpContext = createContext(null);
-function HelpProvider({
-  children,
-  getArticle,
-  searchArticles,
-  getArticleForFeature,
-  getArticleForRoute,
-  getContextForRoute,
-  pathname,
-  isAdmin = false
+function Autocomplete({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Type to search...",
+  emptyText = "No results found.",
+  disabled = false,
+  allowCreate = false,
+  createLabel = "Create new",
+  onCreateNew,
+  onEditSelected,
+  loading = false,
+  className,
+  error = false,
+  "aria-label": ariaLabel,
+  id,
+  name
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [activeArticleSlug, setActiveArticleSlug] = useState(
-    null
-  );
-  const [searchQuery, setSearchQuery] = useState("");
-  const [history, setHistory] = useState([]);
-  const helpContext = useMemo(
-    () => isAdmin ? "admin" : getContextForRoute(pathname),
-    [isAdmin, pathname, getContextForRoute]
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const selectedOption = useMemo(
+    () => options.find((opt) => opt.value === value),
+    [options, value]
   );
-  const activeArticle = useMemo(() => {
-    if (!activeArticleSlug) return null;
-    return getArticle(activeArticleSlug);
-  }, [activeArticleSlug, getArticle]);
-  const searchResults = useMemo(() => {
-    if (!searchQuery.trim()) return [];
-    return searchArticles(searchQuery);
-  }, [searchQuery, searchArticles]);
-  const openHelp = useCallback(
-    (articleSlug) => {
-      setIsOpen(true);
-      if (articleSlug) {
-        setActiveArticleSlug(articleSlug);
-        setHistory([]);
-      } else {
-        const contextualSlug = getArticleForRoute(pathname);
-        setActiveArticleSlug(contextualSlug);
-        setHistory([]);
-      }
-      setSearchQuery("");
+  useEffect(() => {
+    if (selectedOption && !open) {
+      setInputValue(selectedOption.label);
+    } else if (!value && !open) {
+      setInputValue("");
+    }
+  }, [selectedOption, value, open]);
+  const filteredOptions = useMemo(() => {
+    if (!inputValue) return options;
+    const search = inputValue.toLowerCase();
+    return options.filter(
+      (opt) => opt.label.toLowerCase().includes(search) || opt.description?.toLowerCase().includes(search)
+    );
+  }, [options, inputValue]);
+  const exactMatch = useMemo(() => {
+    if (!inputValue) return true;
+    const search = inputValue.toLowerCase();
+    return options.some((opt) => opt.label.toLowerCase() === search);
+  }, [options, inputValue]);
+  const showCreateOption = allowCreate && !!inputValue && !exactMatch;
+  const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0);
+  const hasContent = filteredOptions.length > 0 || showCreateOption;
+  const effectiveOpen = open && hasContent;
+  useEffect(() => {
+    setHighlightedIndex(-1);
+  }, []);
+  const handleSelect = useCallback(
+    (selectedValue, label) => {
+      onValueChange?.(selectedValue);
+      setInputValue(label);
+      setOpen(false);
+      setHighlightedIndex(-1);
     },
-    [pathname, getArticleForRoute]
+    [onValueChange]
   );
-  const closeHelp = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-  const toggleHelp = useCallback(() => {
-    if (isOpen) {
-      closeHelp();
-    } else {
-      openHelp();
+  const handleCreateNew = useCallback(() => {
+    onCreateNew?.(inputValue);
+    setOpen(false);
+    setHighlightedIndex(-1);
+  }, [onCreateNew, inputValue]);
+  const [shouldFocusAfterClear, setShouldFocusAfterClear] = useState(false);
+  const handleClear = useCallback(() => {
+    onValueChange?.("");
+    setInputValue("");
+    setOpen(false);
+    setShouldFocusAfterClear(true);
+  }, [onValueChange]);
+  useEffect(() => {
+    if (shouldFocusAfterClear && !value && inputRef.current) {
+      inputRef.current.focus();
+      setShouldFocusAfterClear(false);
     }
-  }, [isOpen, openHelp, closeHelp]);
-  const setActiveArticle = useCallback((slug) => {
-    setActiveArticleSlug(slug);
-    setSearchQuery("");
+  }, [shouldFocusAfterClear, value]);
+  const handleInputChange = useCallback((e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setOpen(true);
   }, []);
-  const performSearch = useCallback((query) => {
-    setIsOpen(true);
-    setSearchQuery(query);
-    setActiveArticleSlug(null);
+  const handleInputFocus = useCallback(() => {
+    setOpen(true);
   }, []);
-  const openFeatureHelp = useCallback(
-    (featureKey) => {
-      const articleSlug = getArticleForFeature(featureKey);
-      if (articleSlug) {
-        setIsOpen(true);
-        setActiveArticleSlug(articleSlug);
-        setHistory([]);
-        setSearchQuery("");
+  const handleInputClick = useCallback(() => {
+    setOpen(true);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          setOpen(true);
+        }
+        return;
       }
-    },
-    [getArticleForFeature]
-  );
-  const navigateToArticle = useCallback(
-    (slug) => {
-      if (activeArticleSlug && activeArticleSlug !== slug) {
-        setHistory((prev) => [...prev, activeArticleSlug]);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex(
+            (prev) => prev < totalItems - 1 ? prev + 1 : prev
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex((prev) => prev > 0 ? prev - 1 : -1);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (highlightedIndex >= 0) {
+            if (showCreateOption && highlightedIndex === filteredOptions.length) {
+              handleCreateNew();
+            } else if (highlightedIndex < filteredOptions.length) {
+              const option = filteredOptions[highlightedIndex];
+              if (!option.disabled) {
+                handleSelect(option.value, option.label);
+              }
+            }
+          } else if (showCreateOption && filteredOptions.length === 0) {
+            handleCreateNew();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setOpen(false);
+          setHighlightedIndex(-1);
+          if (selectedOption) {
+            setInputValue(selectedOption.label);
+          }
+          break;
+        case "Tab":
+          setOpen(false);
+          break;
       }
-      setActiveArticleSlug(slug);
-      setSearchQuery("");
     },
-    [activeArticleSlug]
+    [
+      open,
+      highlightedIndex,
+      totalItems,
+      showCreateOption,
+      filteredOptions,
+      handleCreateNew,
+      handleSelect,
+      selectedOption
+    ]
   );
-  const goBack = useCallback(() => {
-    if (history.length > 0) {
-      const newHistory = [...history];
-      const previousSlug = newHistory.pop();
-      setHistory(newHistory);
-      setActiveArticleSlug(previousSlug || null);
-    }
-  }, [history]);
-  const canGoBack = history.length > 0;
   useEffect(() => {
-    function handleKeyDown(event) {
-      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "H") {
-        event.preventDefault();
-        toggleHelp();
-      }
-      if (event.key === "Escape" && isOpen) {
-        event.preventDefault();
-        closeHelp();
-      }
+    if (highlightedIndex >= 0 && listRef.current) {
+      const items = listRef.current.querySelectorAll("[data-option]");
+      const item = items[highlightedIndex];
+      item?.scrollIntoView({ block: "nearest" });
     }
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggleHelp, closeHelp, isOpen]);
-  useEffect(() => {
-    function handleClick(event) {
-      const target = event.target;
-      const link = target.closest('a[href="/help"], a[href="/admin/help"]');
-      if (link && !link.hasAttribute("data-prevent-help-intercept")) {
-        event.preventDefault();
-        event.stopPropagation();
-        toggleHelp();
+  }, [highlightedIndex]);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (selectedOption?.description) {
+        setTooltipPosition({ x: e.clientX, y: e.clientY });
       }
-    }
-    document.addEventListener("click", handleClick, true);
-    return () => document.removeEventListener("click", handleClick, true);
-  }, [toggleHelp]);
-  const value = {
-    isOpen,
-    openHelp,
-    closeHelp,
-    toggleHelp,
-    activeArticle,
-    setActiveArticle,
-    helpContext,
-    searchQuery,
-    setSearchQuery,
-    performSearch,
-    searchResults,
-    openFeatureHelp,
-    navigateToArticle,
-    goBack,
-    history,
-    canGoBack
-  };
-  return /* @__PURE__ */ jsx(HelpContext.Provider, { value, children });
-}
-function useHelp() {
-  const context = useContext(HelpContext);
-  if (!context) {
-    throw new Error("useHelp must be used within a HelpProvider");
-  }
-  return context;
-}
-function HelpButton({
-  featureKey,
-  variant = "ghost",
-  size = "icon",
-  className,
-  label = "Help",
-  showLabel = false
-}) {
-  const { openHelp, openFeatureHelp } = useHelp();
-  const handleClick = () => {
-    if (featureKey) {
-      openFeatureHelp(featureKey);
-    } else {
-      openHelp();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant,
-      size: showLabel ? size : "icon",
-      onClick: handleClick,
-      className: cn(showLabel && "gap-2", className),
-      "aria-label": label,
-      children: [
-        /* @__PURE__ */ jsx(HelpCircle, { className: "size-4" }),
-        showLabel && /* @__PURE__ */ jsx("span", { children: label })
-      ]
-    }
+    },
+    [selectedOption?.description]
   );
-}
-function HelpSearchResults({
-  results,
-  query,
-  onSelect,
-  categoryIcons = {}
-}) {
-  if (results.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-      /* @__PURE__ */ jsx(HelpCircle, { className: "size-12 mx-auto text-muted-foreground/50 mb-3" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
-        "No results found for \u201C",
-        query,
-        "\u201D"
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground/70 mt-1", children: "Try different keywords or browse categories below" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
-      results.length,
-      " result",
-      results.length !== 1 ? "s" : "",
-      " for \u201C",
-      query,
-      "\u201D"
-    ] }),
-    results.map((result) => {
-      const Icon = categoryIcons[result.category] || HelpCircle;
-      return /* @__PURE__ */ jsx(
-        "button",
+  const handleMouseEnter = useCallback(() => {
+    if (selectedOption?.description) {
+      setTooltipVisible(true);
+    }
+  }, [selectedOption?.description]);
+  const handleMouseLeave = useCallback(() => {
+    setTooltipVisible(false);
+  }, []);
+  return /* @__PURE__ */ jsxs(Popover, { open: effectiveOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "relative", children: selectedOption ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "button",
-          onClick: () => onSelect(result.slug),
-          className: "w-full text-left p-3 rounded-lg border hover:bg-accent transition-colors",
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(Icon, { className: "size-4 mt-0.5 text-muted-foreground" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: result.title }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: result.description })
-            ] }),
-            /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
-          ] })
-        },
-        result.slug
-      );
-    })
-  ] });
-}
-function HelpTooltip({
-  content,
-  featureKey,
-  size = "sm",
-  className
-}) {
-  const { openFeatureHelp } = useHelp();
-  const iconSize = size === "sm" ? "size-3.5" : "size-4";
-  const handleClick = (e) => {
-    if (featureKey) {
-      e.preventDefault();
-      e.stopPropagation();
-      openFeatureHelp(featureKey);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleClick,
-        className: `inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors ${className}`,
-        "aria-label": "Help",
-        children: /* @__PURE__ */ jsx(HelpCircle, { className: iconSize })
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(TooltipContent, { className: "max-w-xs", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm", children: content }),
-      featureKey && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Click to learn more" })
-    ] })
-  ] });
-}
-function Autocomplete({
-  options,
-  value,
-  onValueChange,
-  placeholder = "Type to search...",
-  emptyText = "No results found.",
-  disabled = false,
-  allowCreate = false,
-  createLabel = "Create new",
-  onCreateNew,
-  onEditSelected,
-  loading = false,
-  className,
-  error = false,
-  "aria-label": ariaLabel,
-  id,
-  name
-}) {
-  const [open, setOpen] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const inputRef = useRef(null);
-  const listRef = useRef(null);
-  const [tooltipVisible, setTooltipVisible] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const selectedOption = useMemo(
-    () => options.find((opt) => opt.value === value),
-    [options, value]
-  );
-  useEffect(() => {
-    if (selectedOption && !open) {
-      setInputValue(selectedOption.label);
-    } else if (!value && !open) {
-      setInputValue("");
-    }
-  }, [selectedOption, value, open]);
-  const filteredOptions = useMemo(() => {
-    if (!inputValue) return options;
-    const search = inputValue.toLowerCase();
-    return options.filter(
-      (opt) => opt.label.toLowerCase().includes(search) || opt.description?.toLowerCase().includes(search)
-    );
-  }, [options, inputValue]);
-  const exactMatch = useMemo(() => {
-    if (!inputValue) return true;
-    const search = inputValue.toLowerCase();
-    return options.some((opt) => opt.label.toLowerCase() === search);
-  }, [options, inputValue]);
-  const showCreateOption = allowCreate && !!inputValue && !exactMatch;
-  const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0);
-  const hasContent = filteredOptions.length > 0 || showCreateOption;
-  const effectiveOpen = open && hasContent;
-  useEffect(() => {
-    setHighlightedIndex(-1);
-  }, []);
-  const handleSelect = useCallback(
-    (selectedValue, label) => {
-      onValueChange?.(selectedValue);
-      setInputValue(label);
-      setOpen(false);
-      setHighlightedIndex(-1);
-    },
-    [onValueChange]
-  );
-  const handleCreateNew = useCallback(() => {
-    onCreateNew?.(inputValue);
-    setOpen(false);
-    setHighlightedIndex(-1);
-  }, [onCreateNew, inputValue]);
-  const [shouldFocusAfterClear, setShouldFocusAfterClear] = useState(false);
-  const handleClear = useCallback(() => {
-    onValueChange?.("");
-    setInputValue("");
-    setOpen(false);
-    setShouldFocusAfterClear(true);
-  }, [onValueChange]);
-  useEffect(() => {
-    if (shouldFocusAfterClear && !value && inputRef.current) {
-      inputRef.current.focus();
-      setShouldFocusAfterClear(false);
-    }
-  }, [shouldFocusAfterClear, value]);
-  const handleInputChange = useCallback((e) => {
-    const newValue = e.target.value;
-    setInputValue(newValue);
-    setOpen(true);
-  }, []);
-  const handleInputFocus = useCallback(() => {
-    setOpen(true);
-  }, []);
-  const handleInputClick = useCallback(() => {
-    setOpen(true);
-  }, []);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (!open) {
-        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-          e.preventDefault();
-          setOpen(true);
-        }
-        return;
-      }
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          setHighlightedIndex(
-            (prev) => prev < totalItems - 1 ? prev + 1 : prev
-          );
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          setHighlightedIndex((prev) => prev > 0 ? prev - 1 : -1);
-          break;
-        case "Enter":
-          e.preventDefault();
-          if (highlightedIndex >= 0) {
-            if (showCreateOption && highlightedIndex === filteredOptions.length) {
-              handleCreateNew();
-            } else if (highlightedIndex < filteredOptions.length) {
-              const option = filteredOptions[highlightedIndex];
-              if (!option.disabled) {
-                handleSelect(option.value, option.label);
-              }
-            }
-          } else if (showCreateOption && filteredOptions.length === 0) {
-            handleCreateNew();
-          }
-          break;
-        case "Escape":
-          e.preventDefault();
-          setOpen(false);
-          setHighlightedIndex(-1);
-          if (selectedOption) {
-            setInputValue(selectedOption.label);
-          }
-          break;
-        case "Tab":
-          setOpen(false);
-          break;
-      }
-    },
-    [
-      open,
-      highlightedIndex,
-      totalItems,
-      showCreateOption,
-      filteredOptions,
-      handleCreateNew,
-      handleSelect,
-      selectedOption
-    ]
-  );
-  useEffect(() => {
-    if (highlightedIndex >= 0 && listRef.current) {
-      const items = listRef.current.querySelectorAll("[data-option]");
-      const item = items[highlightedIndex];
-      item?.scrollIntoView({ block: "nearest" });
-    }
-  }, [highlightedIndex]);
-  const handleMouseMove = useCallback(
-    (e) => {
-      if (selectedOption?.description) {
-        setTooltipPosition({ x: e.clientX, y: e.clientY });
-      }
-    },
-    [selectedOption?.description]
-  );
-  const handleMouseEnter = useCallback(() => {
-    if (selectedOption?.description) {
-      setTooltipVisible(true);
-    }
-  }, [selectedOption?.description]);
-  const handleMouseLeave = useCallback(() => {
-    setTooltipVisible(false);
-  }, []);
-  return /* @__PURE__ */ jsxs(Popover, { open: effectiveOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "relative", children: selectedOption ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex h-9 w-full items-center gap-2 rounded-box border border-input bg-muted/30 px-2 py-1 shadow-xs",
-            disabled && "cursor-not-allowed opacity-50",
-            error && "border-destructive",
-            className
-          ),
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-          onMouseMove: handleMouseMove,
-          children: [
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: "secondary",
-                className: "max-w-[calc(100%-4.5rem)] truncate font-normal",
-                children: selectedOption.label
-              }
-            ),
-            !disabled && !loading && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5 shrink-0", children: [
-              onEditSelected && /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon",
-                  className: "h-6 w-6 text-muted-foreground hover:text-foreground",
-                  onClick: () => onEditSelected(selectedOption),
-                  tabIndex: -1,
-                  children: [
-                    /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit selection" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon",
-                  className: "h-6 w-6 text-muted-foreground hover:text-foreground",
-                  onClick: handleClear,
-                  tabIndex: -1,
-                  children: [
-                    /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Clear selection" })
-                  ]
-                }
-              )
+          className: cn(
+            "flex h-9 w-full items-center gap-2 rounded-box border border-input bg-muted/30 px-2 py-1 shadow-xs",
+            disabled && "cursor-not-allowed opacity-50",
+            error && "border-destructive",
+            className
+          ),
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onMouseMove: handleMouseMove,
+          children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "secondary",
+                className: "max-w-[calc(100%-4.5rem)] truncate font-normal",
+                children: selectedOption.label
+              }
+            ),
+            !disabled && !loading && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5 shrink-0", children: [
+              onEditSelected && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6 text-muted-foreground hover:text-foreground",
+                  onClick: () => onEditSelected(selectedOption),
+                  tabIndex: -1,
+                  children: [
+                    /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit selection" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6 text-muted-foreground hover:text-foreground",
+                  onClick: handleClear,
+                  tabIndex: -1,
+                  children: [
+                    /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Clear selection" })
+                  ]
+                }
+              )
             ] }),
             loading && /* @__PURE__ */ jsx(Loader2, { className: "ml-auto h-4 w-4 shrink-0 animate-spin text-muted-foreground" })
           ]
@@ -2551,81 +2223,6 @@ function Autocomplete({
     )
   ] });
 }
-function ButtonGroup({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: ButtonGroup is visual grouping, not a form fieldset
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "group",
-        "data-orientation": orientation,
-        className: cn(
-          "flex",
-          orientation === "horizontal" ? "flex-row items-center -space-x-px" : "flex-col -space-y-px",
-          // Style direct children to have connected appearance
-          // Use !important to override Button's own shared box radius classes
-          "[&>*]:!rounded-none",
-          "[&>*:first-child]:!rounded-l-box",
-          "[&>*:last-child]:!rounded-r-box",
-          orientation === "vertical" && [
-            "[&>*:first-child]:!rounded-t-box [&>*:first-child]:!rounded-l-none",
-            "[&>*:last-child]:!rounded-b-box [&>*:last-child]:!rounded-r-none"
-          ],
-          // Handle nested button groups
-          "**:[role=group]:flex",
-          "**:[role=group]>*:!rounded-none",
-          "[&>[role=group]:first-child>*:first-child]:!rounded-l-box",
-          "[&>[role=group]:last-child>*:last-child]:!rounded-r-box",
-          className
-        ),
-        ...props
-      }
-    )
-  );
-}
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "hr",
-    {
-      "aria-orientation": orientation,
-      className: cn(
-        "bg-border border-0",
-        orientation === "vertical" ? "h-6 w-px" : "h-px w-6",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ButtonGroupText({
-  className,
-  asChild = false,
-  children,
-  ...props
-}) {
-  if (asChild) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "flex items-center px-3 text-sm text-muted-foreground",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
 function HoverEffect({ items, className }) {
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx(
@@ -3626,1269 +3223,1972 @@ function GooeyInput({
     }
   );
 }
-function InfoTooltip({
-  content,
-  size = "sm",
-  className,
-  side = "top",
-  align = "center"
-}) {
-  const iconSize = size === "sm" ? "size-3.5" : "size-4";
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors ml-1",
-          className
-        ),
-        "aria-label": "More information",
-        children: /* @__PURE__ */ jsx(Info, { className: iconSize })
-      }
-    ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { side, align, className: "max-w-xs", children: typeof content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: content }) : content })
-  ] });
-}
-function InlineEditableText({
+function InfoTooltip({
+  content,
+  size = "sm",
+  className,
+  side = "top",
+  align = "center"
+}) {
+  const iconSize = size === "sm" ? "size-3.5" : "size-4";
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors ml-1",
+          className
+        ),
+        "aria-label": "More information",
+        children: /* @__PURE__ */ jsx(Info, { className: iconSize })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, align, className: "max-w-xs", children: typeof content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: content }) : content })
+  ] });
+}
+function InlineEditableText({
+  value,
+  onSave,
+  isLoading,
+  placeholder = "Click to edit...",
+  className,
+  multiline = false,
+  maxLength,
+  rows = 2
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const inputRef = useRef(null);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    setEditValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (isEditing) {
+      if (multiline && textareaRef.current) {
+        textareaRef.current.focus();
+        textareaRef.current.select();
+      } else if (inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.select();
+      }
+    }
+  }, [isEditing, multiline]);
+  const handleSave = () => {
+    const trimmedValue = editValue.trim();
+    if (trimmedValue !== value) {
+      onSave(trimmedValue);
+    }
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setEditValue(value);
+    setIsEditing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      handleCancel();
+    }
+  };
+  if (isEditing) {
+    if (multiline) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1 w-full", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            onBlur: handleSave,
+            disabled: isLoading,
+            className: cn(
+              "flex-1 bg-transparent border-none outline-none resize-none",
+              "text-muted-foreground focus:text-foreground min-h-[40px]",
+              "border-b border-dashed border-primary/50 focus:border-primary",
+              className
+            ),
+            placeholder,
+            rows
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground mt-1" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          onBlur: handleSave,
+          disabled: isLoading,
+          maxLength,
+          className: cn(
+            "bg-transparent border-none outline-none",
+            "border-b border-dashed border-primary/50 focus:border-primary",
+            className
+          ),
+          placeholder,
+          style: {
+            width: `${Math.max(editValue.length, placeholder.length) + 2}ch`
+          }
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsEditing(true),
+      className: cn(
+        "text-left hover:text-primary transition-colors cursor-pointer",
+        "border-b border-transparent hover:border-dashed hover:border-primary/30",
+        !value && "text-muted-foreground/60 italic text-sm",
+        className
+      ),
+      children: value || placeholder
+    }
+  );
+}
+function InlineEditableDate({
+  value,
+  onSave,
+  isLoading,
+  placeholder = "Select date...",
+  className,
+  formatDisplay
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const handleDateChange = (date) => {
+    if (date) {
+      const newValue = date.toISOString().split("T")[0];
+      if (newValue !== value) {
+        onSave(newValue);
+      }
+    }
+    setIsEditing(false);
+  };
+  const displayDate = () => {
+    if (!value) return placeholder;
+    const date = new Date(value);
+    if (formatDisplay) return formatDisplay(date);
+    return date.toLocaleDateString();
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          value: value ? new Date(value) : void 0,
+          onChange: handleDateChange
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-6 w-6 hover:bg-transparent hover:text-primary",
+          onClick: () => setIsEditing(false),
+          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsEditing(true),
+      className: cn(
+        "flex items-center gap-1 text-sm text-muted-foreground",
+        "hover:text-foreground transition-colors cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }),
+        displayDate()
+      ]
+    }
+  );
+}
+function InlineEditableSelect({
   value,
+  options,
   onSave,
   isLoading,
-  placeholder = "Click to edit...",
-  className,
-  multiline = false,
-  maxLength,
-  rows = 2
+  placeholder = "Select...",
+  className
 }) {
   const [isEditing, setIsEditing] = useState(false);
-  const [editValue, setEditValue] = useState(value);
-  const inputRef = useRef(null);
-  const textareaRef = useRef(null);
-  useEffect(() => {
-    setEditValue(value);
-  }, [value]);
+  const selectRef = useRef(null);
   useEffect(() => {
-    if (isEditing) {
-      if (multiline && textareaRef.current) {
-        textareaRef.current.focus();
-        textareaRef.current.select();
-      } else if (inputRef.current) {
-        inputRef.current.focus();
-        inputRef.current.select();
-      }
+    if (isEditing && selectRef.current) {
+      selectRef.current.focus();
     }
-  }, [isEditing, multiline]);
-  const handleSave = () => {
-    const trimmedValue = editValue.trim();
-    if (trimmedValue !== value) {
-      onSave(trimmedValue);
+  }, [isEditing]);
+  const handleChange = (e) => {
+    const selectedValue = e.target.value;
+    if (selectedValue !== value) {
+      onSave(selectedValue);
     }
     setIsEditing(false);
   };
-  const handleCancel = () => {
-    setEditValue(value);
+  const handleBlur = () => {
     setIsEditing(false);
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSave();
-    } else if (e.key === "Escape") {
-      handleCancel();
+    if (e.key === "Escape") {
+      setIsEditing(false);
     }
   };
+  const currentLabel = options.find((opt) => opt.value === value)?.label || placeholder;
   if (isEditing) {
-    if (multiline) {
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1 w-full", children: [
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          ref: selectRef,
+          value,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          onKeyDown: handleKeyDown,
+          disabled: isLoading,
+          className: cn(
+            "bg-transparent border-none outline-none cursor-pointer",
+            "border-b border-dashed border-primary/50 focus:border-primary",
+            "text-foreground",
+            className
+          ),
+          children: options.map((option) => /* @__PURE__ */ jsx("option", { value: String(option.value), children: option.label }, String(option.value)))
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsEditing(true),
+      className: cn(
+        "text-left hover:text-primary transition-colors cursor-pointer",
+        "border-b border-transparent hover:border-dashed hover:border-primary/30",
+        !value && "text-muted-foreground/60 italic text-sm",
+        className
+      ),
+      children: currentLabel
+    }
+  );
+}
+var sizeClasses = {
+  sm: {
+    wrapper: "h-7",
+    button: "h-7 w-7",
+    input: "h-7 w-12 text-xs",
+    icon: "h-3 w-3"
+  },
+  md: {
+    wrapper: "h-8",
+    button: "h-8 w-8",
+    input: "h-8 w-14 text-sm",
+    icon: "h-3.5 w-3.5"
+  },
+  lg: {
+    wrapper: "h-10",
+    button: "h-10 w-10",
+    input: "h-10 w-16 text-base",
+    icon: "h-4 w-4"
+  }
+};
+function NumberStepper({
+  value,
+  onChange,
+  min = 0,
+  max = Number.MAX_SAFE_INTEGER,
+  step = 1,
+  size = "md",
+  disabled,
+  className,
+  ...props
+}) {
+  const sizes = sizeClasses[size];
+  const [inputValue, setInputValue] = React.useState(value.toString());
+  const [isFocused, setIsFocused] = React.useState(false);
+  React.useEffect(() => {
+    if (!isFocused) {
+      setInputValue(value.toString());
+    }
+  }, [value, isFocused]);
+  const handleDecrement = () => {
+    const newValue = Math.max(min, value - step);
+    onChange(newValue);
+    setInputValue(newValue.toString());
+  };
+  const handleIncrement = () => {
+    const newValue = Math.min(max, value + step);
+    onChange(newValue);
+    setInputValue(newValue.toString());
+  };
+  const handleInputChange = (e) => {
+    const inputVal = e.target.value;
+    if (inputVal === "" || /^[0-9]*$/.test(inputVal)) {
+      setInputValue(inputVal);
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (inputValue === "") {
+      onChange(min);
+      setInputValue(min.toString());
+      return;
+    }
+    const numValue = Number.parseInt(inputValue, 10);
+    if (Number.isNaN(numValue)) {
+      onChange(min);
+      setInputValue(min.toString());
+    } else {
+      const clampedValue = Math.min(max, Math.max(min, numValue));
+      onChange(clampedValue);
+      setInputValue(clampedValue.toString());
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleIncrement();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleDecrement();
+    }
+  };
+  const canDecrement = !disabled && value > min;
+  const canIncrement = !disabled && value < max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center rounded-box border border-input bg-transparent dark:bg-input/30",
+        disabled && "opacity-50",
+        sizes.wrapper,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: !canDecrement,
+            className: cn(
+              "inline-flex items-center justify-center border-r border-input",
+              "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+              "transition-colors disabled:opacity-50 disabled:pointer-events-none",
+              "rounded-l-md",
+              sizes.button
+            ),
+            tabIndex: -1,
+            "aria-label": "Decrease value",
+            children: /* @__PURE__ */ jsx(Minus, { className: sizes.icon })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            value: inputValue,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            disabled,
+            className: cn(
+              "border-0 bg-transparent text-center focus:outline-none focus:ring-0 selection:bg-primary selection:text-primary-foreground",
+              "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+              sizes.input
+            ),
+            ...props
+          }
+        ),
         /* @__PURE__ */ jsx(
-          "textarea",
+          "button",
           {
-            ref: textareaRef,
-            value: editValue,
-            onChange: (e) => setEditValue(e.target.value),
-            onKeyDown: handleKeyDown,
-            onBlur: handleSave,
-            disabled: isLoading,
+            type: "button",
+            onClick: handleIncrement,
+            disabled: !canIncrement,
             className: cn(
-              "flex-1 bg-transparent border-none outline-none resize-none",
-              "text-muted-foreground focus:text-foreground min-h-[40px]",
-              "border-b border-dashed border-primary/50 focus:border-primary",
-              className
+              "inline-flex items-center justify-center border-l border-input",
+              "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+              "transition-colors disabled:opacity-50 disabled:pointer-events-none",
+              "rounded-r-md",
+              sizes.button
             ),
-            placeholder,
-            rows
+            tabIndex: -1,
+            "aria-label": "Increase value",
+            children: /* @__PURE__ */ jsx(Plus, { className: sizes.icon })
           }
-        ),
-        isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground mt-1" })
-      ] });
+        )
+      ]
     }
-    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          value: editValue,
-          onChange: (e) => setEditValue(e.target.value),
-          onKeyDown: handleKeyDown,
-          onBlur: handleSave,
-          disabled: isLoading,
-          maxLength,
-          className: cn(
-            "bg-transparent border-none outline-none",
-            "border-b border-dashed border-primary/50 focus:border-primary",
-            className
+  );
+}
+function PageLoader({ className, message, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center min-h-[calc(100vh-3.5rem)] gap-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SizedSpinner, { size: "lg" }),
+        message && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message })
+      ]
+    }
+  );
+}
+function PageSection({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children });
+}
+function PageSections({
+  children,
+  separator: defaultSeparator = true,
+  separatorClassName,
+  className
+}) {
+  const sections = React.Children.toArray(children).filter(
+    React.isValidElement
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: sections.map((child, index) => {
+    const isLast = index === sections.length - 1;
+    const showSeparator = child.props.separator ?? defaultSeparator;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      child,
+      !isLast && showSeparator && /* @__PURE__ */ jsx(Separator, { className: cn("w-full", separatorClassName) })
+    ] }, index);
+  }) });
+}
+function ProfileSection({
+  title,
+  description,
+  children,
+  icon: Icon,
+  isEditing,
+  onEdit,
+  onCancel,
+  onSave,
+  isSaving,
+  editDisabled,
+  editLabel,
+  action,
+  collapsible = false,
+  defaultCollapsed = false,
+  className,
+  contentClassName,
+  variant = "card"
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const renderActions = () => {
+    if (action) {
+      return action;
+    }
+    if (onEdit) {
+      if (isEditing) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          onCancel && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent hover:text-destructive",
+              onClick: onCancel,
+              disabled: isSaving,
+              "aria-label": "Cancel",
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
           ),
-          placeholder,
-          style: {
-            width: `${Math.max(editValue.length, placeholder.length) + 2}ch`
-          }
+          onSave && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent hover:text-green-600",
+              onClick: onSave,
+              disabled: isSaving,
+              "aria-label": "Save",
+              children: isSaving ? /* @__PURE__ */ jsx(SizedSpinner, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent hover:text-primary",
+          onClick: onEdit,
+          disabled: editDisabled,
+          "aria-label": editLabel ?? `Edit ${title}`,
+          children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
         }
-      ),
-      isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
+      );
+    }
+    if (collapsible) {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent",
+          onClick: () => setIsCollapsed(!isCollapsed),
+          "aria-expanded": !isCollapsed,
+          "aria-label": isCollapsed ? "Expand" : "Collapse",
+          children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 transition-transform duration-200",
+                isCollapsed && "-rotate-90"
+              )
+            }
+          )
+        }
+      );
+    }
+    return null;
+  };
+  if (variant === "simple") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title })
+        ] }),
+        renderActions()
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground px-1", children: description }),
+      (!collapsible || !isCollapsed) && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
     ] });
   }
-  return /* @__PURE__ */ jsx(
-    "button",
+  return /* @__PURE__ */ jsxs(Card, { className, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5" }),
+          title
+        ] }),
+        description && /* @__PURE__ */ jsx(CardDescription, { children: description })
+      ] }),
+      renderActions()
+    ] }),
+    (!collapsible || !isCollapsed) && /* @__PURE__ */ jsx(CardContent, { className: contentClassName, children })
+  ] });
+}
+var spacingClasses = {
+  sm: "py-8",
+  // 32px
+  md: "py-16",
+  // 64px
+  lg: "py-24",
+  // 96px
+  xl: "py-32"
+  // 128px
+};
+var Section = React.forwardRef(
+  ({
+    className,
+    spacing: spacing2 = "md",
+    as: Component = "section",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn(spacingClasses[spacing2], className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+function formatTrendValue(value, isPercentage = true) {
+  const sign = value >= 0 ? "+" : "";
+  return isPercentage ? `${sign}${value}%` : `${sign}${value}`;
+}
+function formatStatValue(value, format, options) {
+  if (typeof value === "string") {
+    return value;
+  }
+  const num = value;
+  switch (format) {
+    case "currency":
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: options?.currencyCode ?? "USD",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: num >= 1e3 ? 0 : 2
+      }).format(num);
+    case "percent":
+      return new Intl.NumberFormat("en-US", {
+        style: "percent",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: options?.percentDecimals ?? 1
+      }).format(num / 100);
+    case "compact":
+      return new Intl.NumberFormat("en-US", {
+        notation: "compact",
+        compactDisplay: "short",
+        maximumFractionDigits: 1
+      }).format(num);
+    case "number":
+      if (Math.abs(num) >= 1e6) {
+        return new Intl.NumberFormat("en-US", {
+          notation: "compact",
+          compactDisplay: "short",
+          maximumFractionDigits: 1
+        }).format(num);
+      }
+      return new Intl.NumberFormat("en-US").format(num);
+    default:
+      return String(value);
+  }
+}
+function TrendBadge({ trend }) {
+  const Icon = trend.direction === "up" ? TrendingUp : trend.direction === "down" ? TrendingDown : null;
+  const colorClass = trend.direction === "up" ? "text-emerald-600 dark:text-emerald-400" : trend.direction === "down" ? "text-destructive" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxs(
+    Badge,
     {
-      type: "button",
-      onClick: () => setIsEditing(true),
-      className: cn(
-        "text-left hover:text-primary transition-colors cursor-pointer",
-        "border-b border-transparent hover:border-dashed hover:border-primary/30",
-        !value && "text-muted-foreground/60 italic text-sm",
-        className
-      ),
-      children: value || placeholder
+      variant: "outline",
+      className: cn("gap-1 rounded-md text-xs", colorClass),
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3" }),
+        formatTrendValue(trend.value, trend.isPercentage ?? true)
+      ]
     }
   );
 }
-function InlineEditableDate({
-  value,
-  onSave,
-  isLoading,
-  placeholder = "Select date...",
-  className,
-  formatDisplay
+function StatCardValueContent({
+  isCompact,
+  displayValue,
+  description,
+  trend,
+  footer
 }) {
-  const [isEditing, setIsEditing] = useState(false);
-  const handleDateChange = (date) => {
-    if (date) {
-      const newValue = date.toISOString().split("T")[0];
-      if (newValue !== value) {
-        onSave(newValue);
-      }
-    }
-    setIsEditing(false);
-  };
-  const displayDate = () => {
-    if (!value) return placeholder;
-    const date = new Date(value);
-    if (formatDisplay) return formatDisplay(date);
-    return date.toLocaleDateString();
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx(
-        DatePicker,
-        {
-          value: value ? new Date(value) : void 0,
-          onChange: handleDateChange
-        }
-      ),
-      isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "h-6 w-6 hover:bg-transparent hover:text-primary",
-          onClick: () => setIsEditing(false),
-          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
-        }
-      )
+  if (isCompact) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-2xl md:text-3xl font-semibold tracking-tight tabular-nums leading-none md:leading-tight truncate", children: displayValue }) }),
+      (description || trend) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2 min-w-0", children: [
+        trend && /* @__PURE__ */ jsx(TrendBadge, { trend }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: description })
+      ] }),
+      trend?.label && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: trend.label }),
+      footer && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: footer })
     ] });
   }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "block text-7xl md:text-8xl font-black tabular-nums leading-none tracking-tighter text-foreground/10 truncate", children: displayValue }) }),
+    (description || trend) && /* @__PURE__ */ jsxs("div", { className: "-mt-6 flex items-center gap-2 min-w-0", children: [
+      trend && /* @__PURE__ */ jsx(TrendBadge, { trend }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground/80 truncate", children: description })
+    ] }),
+    footer && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: footer }),
+    trend?.label && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: trend.label })
+  ] });
+}
+function FlipIndicator({ activeSide }) {
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick: () => setIsEditing(true),
-      className: cn(
-        "flex items-center gap-1 text-sm text-muted-foreground",
-        "hover:text-foreground transition-colors cursor-pointer",
-        className
-      ),
+      className: "absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-10 pointer-events-none",
+      "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }),
-        displayDate()
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-1.5 w-1.5 rounded-full transition-colors",
+              activeSide === "stat" ? "bg-foreground/60" : "bg-foreground/20"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-1.5 w-1.5 rounded-full transition-colors",
+              activeSide === "chart" ? "bg-foreground/60" : "bg-foreground/20"
+            )
+          }
+        )
       ]
     }
   );
 }
-function InlineEditableSelect({
+function MiniChart({ data, type = "area", periodLabel }) {
+  if (!data || data.length === 0) return null;
+  const values = data.map((d) => d.value);
+  const maxValue = Math.max(...values);
+  const minValue = Math.min(...values);
+  const range = maxValue - minValue || 1;
+  const width = 100;
+  const height = 40;
+  const paddingX = 0;
+  const paddingY = 4;
+  const points = data.map((d, i) => {
+    const normalizedX = data.length > 1 ? i / (data.length - 1) : 0.5;
+    const x = paddingX + normalizedX * (width - paddingX * 2);
+    const y = height - paddingY - (d.value - minValue) / range * (height - paddingY * 2);
+    return { x, y, ...d };
+  });
+  const createSmoothPath = (pts) => {
+    if (pts.length < 2) return "";
+    let path = `M ${pts[0].x} ${pts[0].y}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+      const p0 = pts[Math.max(0, i - 1)];
+      const p1 = pts[i];
+      const p2 = pts[i + 1];
+      const p3 = pts[Math.min(pts.length - 1, i + 2)];
+      const tension = 0.3;
+      const cp1x = p1.x + (p2.x - p0.x) * tension;
+      const cp1y = p1.y + (p2.y - p0.y) * tension;
+      const cp2x = p2.x - (p3.x - p1.x) * tension;
+      const cp2y = p2.y - (p3.y - p1.y) * tension;
+      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+    }
+    return path;
+  };
+  const smoothPath = createSmoothPath(points);
+  const areaPath = `${smoothPath} L ${points[points.length - 1].x} ${height} L ${points[0].x} ${height} Z`;
+  const barWidth = (width - paddingX * 2) / data.length - 2;
+  const gradientId = `miniChartGradient-${Math.random().toString(36).substring(2, 11)}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full justify-center px-1", children: [
+    periodLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-2", children: periodLabel }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${width} ${height}`,
+        className: "w-full h-20",
+        preserveAspectRatio: "none",
+        "aria-label": "Chart showing trend data",
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx(
+              "stop",
+              {
+                offset: "5%",
+                className: "[stop-color:hsl(var(--primary))]",
+                stopOpacity: 0.8
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "stop",
+              {
+                offset: "95%",
+                className: "[stop-color:hsl(var(--primary))]",
+                stopOpacity: 0.1
+              }
+            )
+          ] }) }),
+          type === "bar" ? (
+            // Bar chart
+            /* @__PURE__ */ jsx("g", { children: points.map((p, i) => /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: paddingX + i * (width - paddingX * 2) / data.length + 1,
+                y: p.y,
+                width: barWidth,
+                height: height - p.y,
+                className: "fill-primary/30",
+                rx: 1
+              },
+              p.label
+            )) })
+          ) : (
+            // Line/Area chart - matching NewUsersChart style
+            /* @__PURE__ */ jsxs("g", { children: [
+              type === "area" && /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: smoothPath,
+                  fill: "none",
+                  className: "stroke-primary",
+                  strokeWidth: 1.5,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ] })
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-muted-foreground mt-1", children: [
+      /* @__PURE__ */ jsx("span", { children: data[0]?.label }),
+      /* @__PURE__ */ jsx("span", { children: data[data.length - 1]?.label })
+    ] })
+  ] });
+}
+function StatCard({
+  title,
   value,
-  options,
-  onSave,
-  isLoading,
-  placeholder = "Select...",
-  className
+  description,
+  footer,
+  icon,
+  trend,
+  variant = "default",
+  className,
+  size = "default",
+  format,
+  currencyCode,
+  percentDecimals,
+  formatValue = false,
+  onClick,
+  href,
+  chart,
+  defaultSide = "stat"
 }) {
-  const [isEditing, setIsEditing] = useState(false);
-  const selectRef = useRef(null);
-  useEffect(() => {
-    if (isEditing && selectRef.current) {
-      selectRef.current.focus();
-    }
-  }, [isEditing]);
-  const handleChange = (e) => {
-    const selectedValue = e.target.value;
-    if (selectedValue !== value) {
-      onSave(selectedValue);
-    }
-    setIsEditing(false);
+  const [activeSide, setActiveSide] = useState(defaultSide);
+  const effectiveFormat = format ?? (formatValue ? "number" : typeof value === "number" ? "number" : "none");
+  const displayValue = formatStatValue(value, effectiveFormat, {
+    currencyCode,
+    percentDecimals
+  });
+  const variantStyles = {
+    default: "",
+    muted: "bg-linear-to-t from-muted/60 to-muted/20 hover:from-muted/70 hover:to-muted/30 transition-colors",
+    gradient: "bg-gradient-to-t from-primary/5 to-card dark:bg-card",
+    outline: "border-2"
   };
-  const handleBlur = () => {
-    setIsEditing(false);
+  const isInteractive = onClick || href;
+  const hasChart = !!chart;
+  const isCompact = size === "compact";
+  const handleFlip = () => {
+    setActiveSide((prev) => prev === "stat" ? "chart" : "stat");
   };
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      setIsEditing(false);
+  const handleBodyClick = (e) => {
+    e.stopPropagation();
+    if (hasChart) {
+      handleFlip();
+    } else if (onClick) {
+      onClick();
     }
   };
-  const currentLabel = options.find((opt) => opt.value === value)?.label || placeholder;
-  if (isEditing) {
-    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(
-        "select",
-        {
-          ref: selectRef,
-          value,
-          onChange: handleChange,
-          onBlur: handleBlur,
-          onKeyDown: handleKeyDown,
-          disabled: isLoading,
-          className: cn(
-            "bg-transparent border-none outline-none cursor-pointer",
-            "border-b border-dashed border-primary/50 focus:border-primary",
-            "text-foreground",
-            className
-          ),
-          children: options.map((option) => /* @__PURE__ */ jsx("option", { value: String(option.value), children: option.label }, String(option.value)))
-        }
-      ),
-      isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
-    ] });
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
+  const handleHeaderClick = (e) => {
+    e.stopPropagation();
+    if (href) {
+      return;
+    }
+    if (onClick) {
+      onClick();
+    } else if (hasChart) {
+      handleFlip();
+    }
+  };
+  const cardBaseStyles = cn(
+    "h-full relative overflow-hidden gap-0",
+    isCompact ? "min-h-[112px] p-3 md:min-h-[120px] md:p-4" : "py-3",
+    variantStyles[variant],
+    hasChart && "pb-6"
+  );
+  const renderHeader = (showIcon = true) => /* @__PURE__ */ jsxs(
+    CardHeader,
     {
-      type: "button",
-      onClick: () => setIsEditing(true),
       className: cn(
-        "text-left hover:text-primary transition-colors cursor-pointer",
-        "border-b border-transparent hover:border-dashed hover:border-primary/30",
-        !value && "text-muted-foreground/60 italic text-sm",
-        className
+        "flex flex-row items-center justify-between space-y-0 py-0",
+        isCompact ? "px-0" : "px-4"
       ),
-      children: currentLabel
+      children: [
+        href ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href,
+            className: "flex items-center gap-2 hover:text-primary transition-colors z-10",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                CardTitle,
+                {
+                  className: cn(
+                    isCompact ? "text-xs md:text-sm font-medium text-muted-foreground" : "text-sm font-medium"
+                  ),
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          CardTitle,
+          {
+            className: cn(
+              isCompact ? "text-xs md:text-sm font-medium text-muted-foreground" : "text-sm font-medium",
+              "flex items-center gap-2",
+              onClick && "cursor-pointer hover:text-primary transition-colors"
+            ),
+            onClick: handleHeaderClick,
+            children: title
+          }
+        ),
+        showIcon && icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon })
+      ]
     }
   );
-}
-var sizeClasses = {
-  sm: {
-    wrapper: "h-7",
-    button: "h-7 w-7",
-    input: "h-7 w-12 text-xs",
-    icon: "h-3 w-3"
-  },
-  md: {
-    wrapper: "h-8",
-    button: "h-8 w-8",
-    input: "h-8 w-14 text-sm",
-    icon: "h-3.5 w-3.5"
-  },
-  lg: {
-    wrapper: "h-10",
-    button: "h-10 w-10",
-    input: "h-10 w-16 text-base",
-    icon: "h-4 w-4"
+  if (!hasChart) {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn(
+          cardBaseStyles,
+          "group",
+          isInteractive && "cursor-pointer transition-colors hover:border-primary/50",
+          className
+        ),
+        onClick,
+        children: [
+          renderHeader(),
+          /* @__PURE__ */ jsx(
+            CardContent,
+            {
+              className: cn("relative py-0", isCompact ? "px-0" : "px-4"),
+              children: /* @__PURE__ */ jsx(
+                StatCardValueContent,
+                {
+                  isCompact,
+                  displayValue,
+                  description,
+                  trend,
+                  footer
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
   }
-};
-function NumberStepper({
-  value,
-  onChange,
-  min = 0,
-  max = Number.MAX_SAFE_INTEGER,
-  step = 1,
-  size = "md",
-  disabled,
-  className,
-  ...props
-}) {
-  const sizes = sizeClasses[size];
-  const [inputValue, setInputValue] = React.useState(value.toString());
-  const [isFocused, setIsFocused] = React.useState(false);
-  React.useEffect(() => {
-    if (!isFocused) {
-      setInputValue(value.toString());
-    }
-  }, [value, isFocused]);
-  const handleDecrement = () => {
-    const newValue = Math.max(min, value - step);
-    onChange(newValue);
-    setInputValue(newValue.toString());
-  };
-  const handleIncrement = () => {
-    const newValue = Math.min(max, value + step);
-    onChange(newValue);
-    setInputValue(newValue.toString());
-  };
-  const handleInputChange = (e) => {
-    const inputVal = e.target.value;
-    if (inputVal === "" || /^[0-9]*$/.test(inputVal)) {
-      setInputValue(inputVal);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("group h-full min-h-[160px]", className),
+      style: { perspective: "1000px" },
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "relative h-full w-full transition-transform duration-500 cursor-pointer text-left",
+            "[transform-style:preserve-3d]",
+            activeSide === "chart" && "[transform:rotateY(180deg)]"
+          ),
+          onClick: handleBodyClick,
+          "aria-label": activeSide === "chart" ? "Show statistic view" : "Show chart view",
+          "aria-pressed": activeSide === "chart",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Card,
+              {
+                className: cn(
+                  cardBaseStyles,
+                  "absolute inset-0 [backface-visibility:hidden] [transform-style:preserve-3d] [transform:rotateY(0deg)]",
+                  "transition-colors hover:border-primary/50"
+                ),
+                children: [
+                  renderHeader(),
+                  /* @__PURE__ */ jsx(
+                    CardContent,
+                    {
+                      className: cn("relative py-0", isCompact ? "px-0" : "px-4"),
+                      children: /* @__PURE__ */ jsx(
+                        StatCardValueContent,
+                        {
+                          isCompact,
+                          displayValue,
+                          description,
+                          trend,
+                          footer
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(FlipIndicator, { activeSide })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Card,
+              {
+                className: cn(
+                  cardBaseStyles,
+                  "absolute inset-0 [backface-visibility:hidden] [transform-style:preserve-3d] [transform:rotateY(180deg)]",
+                  "transition-colors hover:border-primary/50"
+                ),
+                children: [
+                  renderHeader(false),
+                  /* @__PURE__ */ jsx(CardContent, { className: "relative px-4 py-0 h-full", children: /* @__PURE__ */ jsx(MiniChart, { ...chart }) }),
+                  /* @__PURE__ */ jsx(FlipIndicator, { activeSide })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
+  );
+}
+function StatCardsContainer({
+  children,
+  columns = { default: 1, sm: 2, lg: 4 },
+  className
+}) {
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4"
   };
-  const handleFocus = () => {
-    setIsFocused(true);
+  const smColClasses = {
+    1: "sm:grid-cols-1",
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-3",
+    4: "sm:grid-cols-4"
   };
-  const handleBlur = () => {
-    setIsFocused(false);
-    if (inputValue === "") {
-      onChange(min);
-      setInputValue(min.toString());
-      return;
-    }
-    const numValue = Number.parseInt(inputValue, 10);
-    if (Number.isNaN(numValue)) {
-      onChange(min);
-      setInputValue(min.toString());
-    } else {
-      const clampedValue = Math.min(max, Math.max(min, numValue));
-      onChange(clampedValue);
-      setInputValue(clampedValue.toString());
-    }
+  const mdColClasses = {
+    1: "md:grid-cols-1",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4"
   };
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      handleIncrement();
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      handleDecrement();
-    }
+  const lgColClasses = {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4"
   };
-  const canDecrement = !disabled && value > min;
-  const canIncrement = !disabled && value < max;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "inline-flex items-center rounded-box border border-input bg-transparent dark:bg-input/30",
-        disabled && "opacity-50",
-        sizes.wrapper,
+        "grid gap-4",
+        columns.default && colClasses[columns.default],
+        columns.sm && smColClasses[columns.sm],
+        columns.md && mdColClasses[columns.md],
+        columns.lg && lgColClasses[columns.lg],
         className
       ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleDecrement,
-            disabled: !canDecrement,
-            className: cn(
-              "inline-flex items-center justify-center border-r border-input",
-              "text-muted-foreground hover:text-foreground hover:bg-muted/50",
-              "transition-colors disabled:opacity-50 disabled:pointer-events-none",
-              "rounded-l-md",
-              sizes.button
-            ),
-            tabIndex: -1,
-            "aria-label": "Decrease value",
-            children: /* @__PURE__ */ jsx(Minus, { className: sizes.icon })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-            value: inputValue,
-            onChange: handleInputChange,
-            onKeyDown: handleKeyDown,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            disabled,
-            className: cn(
-              "border-0 bg-transparent text-center focus:outline-none focus:ring-0 selection:bg-primary selection:text-primary-foreground",
-              "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-              sizes.input
-            ),
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleIncrement,
-            disabled: !canIncrement,
-            className: cn(
-              "inline-flex items-center justify-center border-l border-input",
-              "text-muted-foreground hover:text-foreground hover:bg-muted/50",
-              "transition-colors disabled:opacity-50 disabled:pointer-events-none",
-              "rounded-r-md",
-              sizes.button
-            ),
-            tabIndex: -1,
-            "aria-label": "Increase value",
-            children: /* @__PURE__ */ jsx(Plus, { className: sizes.icon })
-          }
-        )
-      ]
+      children
     }
   );
 }
-function PageLoader({ className, message, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
+function TextHighlight({
+  children,
+  className,
+  duration = 2,
+  delay = 0.5,
+  gradient = "from-indigo-300 to-purple-300 dark:from-indigo-500 dark:to-purple-500",
+  disableAnimation = false
+}) {
+  const animationStyle = disableAnimation ? { backgroundSize: "100% 100%" } : {
+    "--highlight-duration": `${duration}s`,
+    "--highlight-delay": `${delay}s`
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
     {
+      "data-slot": "text-highlight",
+      "data-animated": !disableAnimation,
       className: cn(
-        "flex flex-col items-center justify-center min-h-[calc(100vh-3.5rem)] gap-3",
+        "relative inline-block rounded-lg bg-gradient-to-r bg-no-repeat px-1 pb-1",
+        !disableAnimation && "text-highlight-animated",
+        gradient,
         className
       ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Spinner, { size: "lg" }),
-        message && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message })
-      ]
+      style: {
+        backgroundPosition: "left center",
+        ...animationStyle
+      },
+      children
     }
   );
 }
-function PageSection({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(className), children });
+function TooltipCard({
+  children,
+  className,
+  containerClassName,
+  content,
+  triggerClassName,
+  delayDuration = 150,
+  side = "top",
+  align = "center",
+  sideOffset = 10,
+  ...tooltipProps
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { delayDuration, ...tooltipProps, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline cursor-help appearance-none border-0 bg-transparent p-0 align-baseline font-medium text-inherit underline decoration-current/35 underline-offset-4 transition-colors",
+          "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          className,
+          triggerClassName
+        ),
+        "data-slot": "tooltip-card-trigger",
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        align,
+        className: cn(
+          "max-w-sm rounded-box border border-border bg-popover px-4 py-3 text-popover-foreground shadow-xl",
+          "text-sm leading-6 font-normal",
+          containerClassName
+        ),
+        "data-slot": "tooltip-card-content",
+        side,
+        sideOffset,
+        children: typeof content === "string" ? /* @__PURE__ */ jsx("p", { "data-slot": "tooltip-card-text", children: content }) : content
+      }
+    )
+  ] });
+}
+function HelpArticleIndex({ groups, onSelect }) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+      group.icon,
+      /* @__PURE__ */ jsx("h3", { className: "font-medium", children: group.title })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.articles.map((article) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(article.slug),
+        className: "w-full text-left p-2 rounded hover:bg-accent transition-colors flex items-center justify-between group",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: article.title }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" })
+        ]
+      },
+      article.slug
+    )) })
+  ] }, index)) });
 }
-function PageSections({
-  children,
-  separator: defaultSeparator = true,
-  separatorClassName,
-  className
+function HelpArticleView({
+  article,
+  onNavigate,
+  onBackToIndex,
+  relatedArticles = [],
+  isLoading = false,
+  children
 }) {
-  const sections = React.Children.toArray(children).filter(
-    React.isValidElement
-  );
-  return /* @__PURE__ */ jsx("div", { className: cn(className), children: sections.map((child, index) => {
-    const isLast = index === sections.length - 1;
-    const showSeparator = child.props.separator ?? defaultSeparator;
-    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      child,
-      !isLast && showSeparator && /* @__PURE__ */ jsx(Separator, { className: cn("w-full", separatorClassName) })
-    ] }, index);
-  }) });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mb-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onBackToIndex,
+            className: "capitalize hover:text-foreground hover:underline transition-colors cursor-pointer",
+            children: article.category
+          }
+        ),
+        article.subcategory && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
+          /* @__PURE__ */ jsx("span", { className: "capitalize", children: article.subcategory })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: article.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: article.description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none prose-headings:font-semibold prose-a:text-primary hover:prose-a:underline [&>*:first-child]:mt-0", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(SizedSpinner, { className: "size-6" }) }) : children ? children : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Failed to load article content. Please try again later." }) }),
+    article.tags && article.tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Tags" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: article.tags.map((tag) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-flex px-2 py-0.5 text-xs rounded-full bg-muted",
+          children: tag
+        },
+        tag
+      )) })
+    ] }),
+    relatedArticles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Related Articles" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: relatedArticles.map((related) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onNavigate(related.slug),
+          className: "w-full text-left p-2 rounded border hover:bg-accent transition-colors text-sm",
+          children: /* @__PURE__ */ jsx("p", { className: "font-medium", children: related.title })
+        },
+        related.slug
+      )) })
+    ] })
+  ] });
 }
-function ProfileSection({
-  title,
-  description,
+var HelpContext = createContext(null);
+function HelpProvider({
   children,
-  icon: Icon,
-  isEditing,
-  onEdit,
-  onCancel,
-  onSave,
-  isSaving,
-  editDisabled,
-  editLabel,
-  action,
-  collapsible = false,
-  defaultCollapsed = false,
-  className,
-  contentClassName,
-  variant = "card"
+  getArticle,
+  searchArticles,
+  getArticleForFeature,
+  getArticleForRoute,
+  getContextForRoute,
+  pathname,
+  isAdmin = false
 }) {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-  const renderActions = () => {
-    if (action) {
-      return action;
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeArticleSlug, setActiveArticleSlug] = useState(
+    null
+  );
+  const [searchQuery, setSearchQuery] = useState("");
+  const [history, setHistory] = useState([]);
+  const helpContext = useMemo(
+    () => isAdmin ? "admin" : getContextForRoute(pathname),
+    [isAdmin, pathname, getContextForRoute]
+  );
+  const activeArticle = useMemo(() => {
+    if (!activeArticleSlug) return null;
+    return getArticle(activeArticleSlug);
+  }, [activeArticleSlug, getArticle]);
+  const searchResults = useMemo(() => {
+    if (!searchQuery.trim()) return [];
+    return searchArticles(searchQuery);
+  }, [searchQuery, searchArticles]);
+  const openHelp = useCallback(
+    (articleSlug) => {
+      setIsOpen(true);
+      if (articleSlug) {
+        setActiveArticleSlug(articleSlug);
+        setHistory([]);
+      } else {
+        const contextualSlug = getArticleForRoute(pathname);
+        setActiveArticleSlug(contextualSlug);
+        setHistory([]);
+      }
+      setSearchQuery("");
+    },
+    [pathname, getArticleForRoute]
+  );
+  const closeHelp = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const toggleHelp = useCallback(() => {
+    if (isOpen) {
+      closeHelp();
+    } else {
+      openHelp();
     }
-    if (onEdit) {
-      if (isEditing) {
-        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          onCancel && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent hover:text-destructive",
-              onClick: onCancel,
-              disabled: isSaving,
-              "aria-label": "Cancel",
-              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-            }
-          ),
-          onSave && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent hover:text-green-600",
-              onClick: onSave,
-              disabled: isSaving,
-              "aria-label": "Save",
-              children: isSaving ? /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-            }
-          )
-        ] });
+  }, [isOpen, openHelp, closeHelp]);
+  const setActiveArticle = useCallback((slug) => {
+    setActiveArticleSlug(slug);
+    setSearchQuery("");
+  }, []);
+  const performSearch = useCallback((query) => {
+    setIsOpen(true);
+    setSearchQuery(query);
+    setActiveArticleSlug(null);
+  }, []);
+  const openFeatureHelp = useCallback(
+    (featureKey) => {
+      const articleSlug = getArticleForFeature(featureKey);
+      if (articleSlug) {
+        setIsOpen(true);
+        setActiveArticleSlug(articleSlug);
+        setHistory([]);
+        setSearchQuery("");
       }
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent hover:text-primary",
-          onClick: onEdit,
-          disabled: editDisabled,
-          "aria-label": editLabel ?? `Edit ${title}`,
-          children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
-        }
-      );
+    },
+    [getArticleForFeature]
+  );
+  const navigateToArticle = useCallback(
+    (slug) => {
+      if (activeArticleSlug && activeArticleSlug !== slug) {
+        setHistory((prev) => [...prev, activeArticleSlug]);
+      }
+      setActiveArticleSlug(slug);
+      setSearchQuery("");
+    },
+    [activeArticleSlug]
+  );
+  const goBack = useCallback(() => {
+    if (history.length > 0) {
+      const newHistory = [...history];
+      const previousSlug = newHistory.pop();
+      setHistory(newHistory);
+      setActiveArticleSlug(previousSlug || null);
     }
-    if (collapsible) {
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "h-8 w-8 text-muted-foreground/60 hover:bg-transparent",
-          onClick: () => setIsCollapsed(!isCollapsed),
-          "aria-expanded": !isCollapsed,
-          "aria-label": isCollapsed ? "Expand" : "Collapse",
-          children: /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: cn(
-                "h-4 w-4 transition-transform duration-200",
-                isCollapsed && "-rotate-90"
-              )
-            }
-          )
-        }
-      );
+  }, [history]);
+  const canGoBack = history.length > 0;
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "H") {
+        event.preventDefault();
+        toggleHelp();
+      }
+      if (event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        closeHelp();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleHelp, closeHelp, isOpen]);
+  useEffect(() => {
+    function handleClick(event) {
+      const target = event.target;
+      const link = target.closest('a[href="/help"], a[href="/admin/help"]');
+      if (link && !link.hasAttribute("data-prevent-help-intercept")) {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleHelp();
+      }
     }
-    return null;
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, [toggleHelp]);
+  const value = {
+    isOpen,
+    openHelp,
+    closeHelp,
+    toggleHelp,
+    activeArticle,
+    setActiveArticle,
+    helpContext,
+    searchQuery,
+    setSearchQuery,
+    performSearch,
+    searchResults,
+    openFeatureHelp,
+    navigateToArticle,
+    goBack,
+    history,
+    canGoBack
   };
-  if (variant === "simple") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          Icon && /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title })
-        ] }),
-        renderActions()
-      ] }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground px-1", children: description }),
-      (!collapsible || !isCollapsed) && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Card, { className, children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
-          Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5" }),
-          title
-        ] }),
-        description && /* @__PURE__ */ jsx(CardDescription, { children: description })
-      ] }),
-      renderActions()
-    ] }),
-    (!collapsible || !isCollapsed) && /* @__PURE__ */ jsx(CardContent, { className: contentClassName, children })
-  ] });
+  return /* @__PURE__ */ jsx(HelpContext.Provider, { value, children });
 }
-var Progress = React.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
-  ProgressPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-muted",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      ProgressPrimitive.Indicator,
-      {
-        className: "h-full w-full flex-1 bg-primary transition-all duration-300 ease-out",
-        style: { transform: `translateX(-${100 - (value || 0)}%)` }
-      }
-    )
+function useHelp() {
+  const context = useContext(HelpContext);
+  if (!context) {
+    throw new Error("useHelp must be used within a HelpProvider");
   }
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-var RadioGroup = ({
+  return context;
+}
+function HelpButton({
+  featureKey,
+  variant = "ghost",
+  size = "icon",
   className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Root,
-    {
-      className: cn("grid gap-2", className),
-      ...props
+  label = "Help",
+  showLabel = false
+}) {
+  const { openHelp, openFeatureHelp } = useHelp();
+  const handleClick = () => {
+    if (featureKey) {
+      openFeatureHelp(featureKey);
+    } else {
+      openHelp();
     }
-  );
-};
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Item,
+  };
+  return /* @__PURE__ */ jsxs(
+    Button,
     {
-      className: cn(
-        "aspect-square h-4 w-4 rounded-full border-2 border-muted-foreground/50 text-primary shadow-sm transition-all",
-        "outline-none focus:border-primary focus:shadow-[0_0_0_3px_hsl(var(--primary)/0.3)]",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-primary-foreground text-primary-foreground" }) })
+      variant,
+      size: showLabel ? size : "icon",
+      onClick: handleClick,
+      className: cn(showLabel && "gap-2", className),
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(HelpCircle, { className: "size-4" }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: label })
+      ]
     }
   );
-};
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-var spacingClasses = {
-  sm: "py-8",
-  // 32px
-  md: "py-16",
-  // 64px
-  lg: "py-24",
-  // 96px
-  xl: "py-32"
-  // 128px
-};
-var Section = React.forwardRef(
-  ({
-    className,
-    spacing: spacing2 = "md",
-    as: Component = "section",
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: cn(spacingClasses[spacing2], className),
-        ...props,
-        children
-      }
-    );
+}
+function HelpSearchResults({
+  results,
+  query,
+  onSelect,
+  categoryIcons = {}
+}) {
+  if (results.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+      /* @__PURE__ */ jsx(HelpCircle, { className: "size-12 mx-auto text-muted-foreground/50 mb-3" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+        "No results found for \u201C",
+        query,
+        "\u201D"
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground/70 mt-1", children: "Try different keywords or browse categories below" })
+    ] });
   }
-);
-Section.displayName = "Section";
-var Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SliderPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      (props.defaultValue ?? props.value ?? [0]).map((_, index) => /* @__PURE__ */ jsx(
-        SliderPrimitive.Thumb,
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+      results.length,
+      " result",
+      results.length !== 1 ? "s" : "",
+      " for \u201C",
+      query,
+      "\u201D"
+    ] }),
+    results.map((result) => {
+      const Icon = categoryIcons[result.category] || HelpCircle;
+      return /* @__PURE__ */ jsx(
+        "button",
         {
-          className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+          type: "button",
+          onClick: () => onSelect(result.slug),
+          className: "w-full text-left p-3 rounded-lg border hover:bg-accent transition-colors",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4 mt-0.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: result.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: result.description })
+            ] }),
+            /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
+          ] })
         },
-        index
-      ))
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-function formatTrendValue(value, isPercentage = true) {
-  const sign = value >= 0 ? "+" : "";
-  return isPercentage ? `${sign}${value}%` : `${sign}${value}`;
+        result.slug
+      );
+    })
+  ] });
 }
-function formatStatValue(value, format, options) {
-  if (typeof value === "string") {
-    return value;
-  }
-  const num = value;
-  switch (format) {
-    case "currency":
-      return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: options?.currencyCode ?? "USD",
-        minimumFractionDigits: 0,
-        maximumFractionDigits: num >= 1e3 ? 0 : 2
-      }).format(num);
-    case "percent":
-      return new Intl.NumberFormat("en-US", {
-        style: "percent",
-        minimumFractionDigits: 0,
-        maximumFractionDigits: options?.percentDecimals ?? 1
-      }).format(num / 100);
-    case "compact":
-      return new Intl.NumberFormat("en-US", {
-        notation: "compact",
-        compactDisplay: "short",
-        maximumFractionDigits: 1
-      }).format(num);
-    case "number":
-      if (Math.abs(num) >= 1e6) {
-        return new Intl.NumberFormat("en-US", {
-          notation: "compact",
-          compactDisplay: "short",
-          maximumFractionDigits: 1
-        }).format(num);
+function HelpTooltip({
+  content,
+  featureKey,
+  size = "sm",
+  className
+}) {
+  const { openFeatureHelp } = useHelp();
+  const iconSize = size === "sm" ? "size-3.5" : "size-4";
+  const handleClick = (e) => {
+    if (featureKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      openFeatureHelp(featureKey);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        className: `inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors ${className}`,
+        "aria-label": "Help",
+        children: /* @__PURE__ */ jsx(HelpCircle, { className: iconSize })
       }
-      return new Intl.NumberFormat("en-US").format(num);
-    default:
-      return String(value);
+    ) }),
+    /* @__PURE__ */ jsxs(TooltipContent, { className: "max-w-xs", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: content }),
+      featureKey && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Click to learn more" })
+    ] })
+  ] });
+}
+var buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
   }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: upstream shadcn markup; ButtonGroup is a visual grouping, not a form fieldset
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "data-slot": "button-group",
+        "data-orientation": orientation,
+        className: cn(buttonGroupVariants({ orientation }), className),
+        ...props
+      }
+    )
+  );
 }
-function TrendBadge({ trend }) {
-  const Icon = trend.direction === "up" ? TrendingUp : trend.direction === "down" ? TrendingDown : null;
-  const colorClass = trend.direction === "up" ? "text-emerald-600 dark:text-emerald-400" : trend.direction === "down" ? "text-destructive" : "text-muted-foreground";
-  return /* @__PURE__ */ jsxs(
-    Badge,
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
     {
-      variant: "outline",
-      className: cn("gap-1 rounded-md text-xs", colorClass),
-      children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3" }),
-        formatTrendValue(trend.value, trend.isPercentage ?? true)
-      ]
+      className: cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
     }
   );
 }
-function StatCardValueContent({
-  isCompact,
-  displayValue,
-  description,
-  trend,
-  footer
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
 }) {
-  if (isCompact) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-2xl md:text-3xl font-semibold tracking-tight tabular-nums leading-none md:leading-tight truncate", children: displayValue }) }),
-      (description || trend) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2 min-w-0", children: [
-        trend && /* @__PURE__ */ jsx(TrendBadge, { trend }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: description })
-      ] }),
-      trend?.label && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: trend.label }),
-      footer && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: footer })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "block text-7xl md:text-8xl font-black tabular-nums leading-none tracking-tighter text-foreground/10 truncate", children: displayValue }) }),
-    (description || trend) && /* @__PURE__ */ jsxs("div", { className: "-mt-6 flex items-center gap-2 min-w-0", children: [
-      trend && /* @__PURE__ */ jsx(TrendBadge, { trend }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground/80 truncate", children: description })
-    ] }),
-    footer && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: footer }),
-    trend?.label && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: trend.label })
-  ] });
-}
-function FlipIndicator({ activeSide }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Separator,
     {
-      className: "absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-10 pointer-events-none",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "h-1.5 w-1.5 rounded-full transition-colors",
-              activeSide === "stat" ? "bg-foreground/60" : "bg-foreground/20"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "h-1.5 w-1.5 rounded-full transition-colors",
-              activeSide === "chart" ? "bg-foreground/60" : "bg-foreground/20"
-            )
-          }
-        )
-      ]
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
     }
   );
 }
-function MiniChart({ data, type = "area", periodLabel }) {
-  if (!data || data.length === 0) return null;
-  const values = data.map((d) => d.value);
-  const maxValue = Math.max(...values);
-  const minValue = Math.min(...values);
-  const range = maxValue - minValue || 1;
-  const width = 100;
-  const height = 40;
-  const paddingX = 0;
-  const paddingY = 4;
-  const points = data.map((d, i) => {
-    const normalizedX = data.length > 1 ? i / (data.length - 1) : 0.5;
-    const x = paddingX + normalizedX * (width - paddingX * 2);
-    const y = height - paddingY - (d.value - minValue) / range * (height - paddingY * 2);
-    return { x, y, ...d };
-  });
-  const createSmoothPath = (pts) => {
-    if (pts.length < 2) return "";
-    let path = `M ${pts[0].x} ${pts[0].y}`;
-    for (let i = 0; i < pts.length - 1; i++) {
-      const p0 = pts[Math.max(0, i - 1)];
-      const p1 = pts[i];
-      const p2 = pts[i + 1];
-      const p3 = pts[Math.min(pts.length - 1, i + 2)];
-      const tension = 0.3;
-      const cp1x = p1.x + (p2.x - p0.x) * tension;
-      const cp1y = p1.y + (p2.y - p0.y) * tension;
-      const cp2x = p2.x - (p3.x - p1.x) * tension;
-      const cp2y = p2.y - (p3.y - p1.y) * tension;
-      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      ),
+      ...props
     }
-    return path;
-  };
-  const smoothPath = createSmoothPath(points);
-  const areaPath = `${smoothPath} L ${points[points.length - 1].x} ${height} L ${points[0].x} ${height} Z`;
-  const barWidth = (width - paddingX * 2) / data.length - 2;
-  const gradientId = `miniChartGradient-${Math.random().toString(36).substring(2, 11)}`;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full justify-center px-1", children: [
-    periodLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-2", children: periodLabel }),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        className: "w-full h-20",
-        preserveAspectRatio: "none",
-        "aria-label": "Chart showing trend data",
-        role: "img",
-        children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx(
-              "stop",
-              {
-                offset: "5%",
-                className: "[stop-color:hsl(var(--primary))]",
-                stopOpacity: 0.8
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "stop",
-              {
-                offset: "95%",
-                className: "[stop-color:hsl(var(--primary))]",
-                stopOpacity: 0.1
-              }
-            )
-          ] }) }),
-          type === "bar" ? (
-            // Bar chart
-            /* @__PURE__ */ jsx("g", { children: points.map((p, i) => /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: paddingX + i * (width - paddingX * 2) / data.length + 1,
-                y: p.y,
-                width: barWidth,
-                height: height - p.y,
-                className: "fill-primary/30",
-                rx: 1
-              },
-              p.label
-            )) })
-          ) : (
-            // Line/Area chart - matching NewUsersChart style
-            /* @__PURE__ */ jsxs("g", { children: [
-              type === "area" && /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradientId})` }),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: smoothPath,
-                  fill: "none",
-                  className: "stroke-primary",
-                  strokeWidth: 1.5,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              )
-            ] })
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-muted-foreground mt-1", children: [
-      /* @__PURE__ */ jsx("span", { children: data[0]?.label }),
-      /* @__PURE__ */ jsx("span", { children: data[data.length - 1]?.label })
-    ] })
-  ] });
+  );
 }
-function StatCard({
-  title,
-  value,
-  description,
-  footer,
-  icon,
-  trend,
-  variant = "default",
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
   className,
-  size = "default",
-  format,
-  currencyCode,
-  percentDecimals,
-  formatValue = false,
-  onClick,
-  href,
-  chart,
-  defaultSide = "stat"
+  variant = "default",
+  ...props
 }) {
-  const [activeSide, setActiveSide] = useState(defaultSide);
-  const effectiveFormat = format ?? (formatValue ? "number" : typeof value === "number" ? "number" : "none");
-  const displayValue = formatStatValue(value, effectiveFormat, {
-    currencyCode,
-    percentDecimals
-  });
-  const variantStyles = {
-    default: "",
-    muted: "bg-linear-to-t from-muted/60 to-muted/20 hover:from-muted/70 hover:to-muted/30 transition-colors",
-    gradient: "bg-gradient-to-t from-primary/5 to-card dark:bg-card",
-    outline: "border-2"
-  };
-  const isInteractive = onClick || href;
-  const hasChart = !!chart;
-  const isCompact = size === "compact";
-  const handleFlip = () => {
-    setActiveSide((prev) => prev === "stat" ? "chart" : "stat");
-  };
-  const handleBodyClick = (e) => {
-    e.stopPropagation();
-    if (hasChart) {
-      handleFlip();
-    } else if (onClick) {
-      onClick();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
     }
-  };
-  const handleHeaderClick = (e) => {
-    e.stopPropagation();
-    if (href) {
-      return;
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-lg font-medium tracking-tight", className),
+      ...props
     }
-    if (onClick) {
-      onClick();
-    } else if (hasChart) {
-      handleFlip();
+  );
+}
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
     }
-  };
-  const cardBaseStyles = cn(
-    "h-full relative overflow-hidden gap-0",
-    isCompact ? "min-h-[112px] p-3 md:min-h-[120px] md:p-4" : "py-3",
-    variantStyles[variant],
-    hasChart && "pb-6"
   );
-  const renderHeader = (showIcon = true) => /* @__PURE__ */ jsxs(
-    CardHeader,
+}
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
+      "data-slot": "empty-content",
       className: cn(
-        "flex flex-row items-center justify-between space-y-0 py-0",
-        isCompact ? "px-0" : "px-4"
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
       ),
-      children: [
-        href ? /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href,
-            className: "flex items-center gap-2 hover:text-primary transition-colors z-10",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsx(
-                CardTitle,
-                {
-                  className: cn(
-                    isCompact ? "text-xs md:text-sm font-medium text-muted-foreground" : "text-sm font-medium"
-                  ),
-                  children: title
-                }
-              ),
-              /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity" })
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(
-          CardTitle,
-          {
-            className: cn(
-              isCompact ? "text-xs md:text-sm font-medium text-muted-foreground" : "text-sm font-medium",
-              "flex items-center gap-2",
-              onClick && "cursor-pointer hover:text-primary transition-colors"
-            ),
-            onClick: handleHeaderClick,
-            children: title
-          }
-        ),
-        showIcon && icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon })
-      ]
+      ...props
     }
   );
-  if (!hasChart) {
-    return /* @__PURE__ */ jsxs(
-      Card,
+}
+function ItemGroup({ className, ...props }) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: upstream shadcn markup; ItemGroup keeps a div so Item can be any element via asChild
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        className: cn(
-          cardBaseStyles,
-          "group",
-          isInteractive && "cursor-pointer transition-colors hover:border-primary/50",
-          className
-        ),
-        onClick,
-        children: [
-          renderHeader(),
-          /* @__PURE__ */ jsx(
-            CardContent,
-            {
-              className: cn("relative py-0", isCompact ? "px-0" : "px-4"),
-              children: /* @__PURE__ */ jsx(
-                StatCardValueContent,
-                {
-                  isCompact,
-                  displayValue,
-                  description,
-                  trend,
-                  footer
-                }
-              )
-            }
-          )
-        ]
+        role: "list",
+        "data-slot": "item-group",
+        className: cn("group/item-group flex flex-col", className),
+        ...props
       }
-    );
-  }
+    )
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "div",
+    Separator,
     {
-      className: cn("group h-full min-h-[160px]", className),
-      style: { perspective: "1000px" },
-      children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "relative h-full w-full transition-transform duration-500 cursor-pointer text-left",
-            "[transform-style:preserve-3d]",
-            activeSide === "chart" && "[transform:rotateY(180deg)]"
-          ),
-          onClick: handleBodyClick,
-          "aria-label": activeSide === "chart" ? "Show statistic view" : "Show chart view",
-          "aria-pressed": activeSide === "chart",
-          children: [
-            /* @__PURE__ */ jsxs(
-              Card,
-              {
-                className: cn(
-                  cardBaseStyles,
-                  "absolute inset-0 [backface-visibility:hidden] [transform-style:preserve-3d] [transform:rotateY(0deg)]",
-                  "transition-colors hover:border-primary/50"
-                ),
-                children: [
-                  renderHeader(),
-                  /* @__PURE__ */ jsx(
-                    CardContent,
-                    {
-                      className: cn("relative py-0", isCompact ? "px-0" : "px-4"),
-                      children: /* @__PURE__ */ jsx(
-                        StatCardValueContent,
-                        {
-                          isCompact,
-                          displayValue,
-                          description,
-                          trend,
-                          footer
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FlipIndicator, { activeSide })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              Card,
-              {
-                className: cn(
-                  cardBaseStyles,
-                  "absolute inset-0 [backface-visibility:hidden] [transform-style:preserve-3d] [transform:rotateY(180deg)]",
-                  "transition-colors hover:border-primary/50"
-                ),
-                children: [
-                  renderHeader(false),
-                  /* @__PURE__ */ jsx(CardContent, { className: "relative px-4 py-0 h-full", children: /* @__PURE__ */ jsx(MiniChart, { ...chart }) }),
-                  /* @__PURE__ */ jsx(FlipIndicator, { activeSide })
-                ]
-              }
-            )
-          ]
-        }
-      )
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-0", className),
+      ...props
+    }
+  );
+}
+var itemVariants = cva(
+  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50"
+      },
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
     }
   );
 }
-function StatCardsContainer({
-  children,
-  columns = { default: 1, sm: 2, lg: 4 },
-  className
+var itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
 }) {
-  const colClasses = {
-    1: "grid-cols-1",
-    2: "grid-cols-2",
-    3: "grid-cols-3",
-    4: "grid-cols-4"
-  };
-  const smColClasses = {
-    1: "sm:grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-3",
-    4: "sm:grid-cols-4"
-  };
-  const mdColClasses = {
-    1: "md:grid-cols-1",
-    2: "md:grid-cols-2",
-    3: "md:grid-cols-3",
-    4: "md:grid-cols-4"
-  };
-  const lgColClasses = {
-    1: "lg:grid-cols-1",
-    2: "lg:grid-cols-2",
-    3: "lg:grid-cols-3",
-    4: "lg:grid-cols-4"
-  };
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
       className: cn(
-        "grid gap-4",
-        columns.default && colClasses[columns.default],
-        columns.sm && smColClasses[columns.sm],
-        columns.md && mdColClasses[columns.md],
-        columns.lg && lgColClasses[columns.lg],
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
         className
       ),
-      children
+      ...props
     }
   );
 }
-function TextHighlight({
-  children,
-  className,
-  duration = 2,
-  delay = 0.5,
-  gradient = "from-indigo-300 to-purple-300 dark:from-indigo-500 dark:to-purple-500",
-  disableAnimation = false
-}) {
-  const animationStyle = disableAnimation ? { backgroundSize: "100% 100%" } : {
-    "--highlight-duration": `${duration}s`,
-    "--highlight-delay": `${delay}s`
-  };
+function ItemTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    "div",
     {
-      "data-slot": "text-highlight",
-      "data-animated": !disableAnimation,
+      "data-slot": "item-title",
       className: cn(
-        "relative inline-block rounded-lg bg-gradient-to-r bg-no-repeat px-1 pb-1",
-        !disableAnimation && "text-highlight-animated",
-        gradient,
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
         className
       ),
-      style: {
-        backgroundPosition: "left center",
-        ...animationStyle
-      },
-      children
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
     }
   );
 }
-var ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Root,
+var Progress = React.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+  ProgressPrimitive.Root,
   {
     ref,
-    className: cn("flex items-center justify-center gap-1", className),
+    className: cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+      className
+    ),
     ...props,
-    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx(
+      ProgressPrimitive.Indicator,
+      {
+        className: "h-full w-full flex-1 bg-primary transition-all duration-300 ease-out",
+        style: { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    )
   }
 ));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+Progress.displayName = ProgressPrimitive.Root.displayName;
+var RadioGroup = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props
+    }
+  );
+};
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border-2 border-muted-foreground/50 text-primary shadow-sm transition-all",
+        "outline-none focus:border-primary focus:shadow-[0_0_0_3px_hsl(var(--primary)/0.3)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-primary-foreground text-primary-foreground" }) })
+    }
+  );
+};
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
 var ToggleGroupContext = React.createContext({
-  size: void 0,
-  variant: void 0
+  size: "default",
+  variant: "default",
+  spacing: 0
 });
-var ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing: spacing2 = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing2,
+      style: { "--gap": spacing2 },
+      className: cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing: spacing2 }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
   const context = React.useContext(ToggleGroupContext);
-  const resolvedVariant = variant || context.variant || "default";
-  const resolvedSize = size || context.size || "default";
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
-      ref,
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
       className: cn(
-        "inline-flex items-center justify-center rounded-box text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-        resolvedVariant === "outline" && "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-        resolvedSize === "default" && "h-10 px-3",
-        resolvedSize === "sm" && "h-9 px-2.5",
-        resolvedSize === "lg" && "h-11 px-5",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
         className
       ),
       ...props,
       children
     }
   );
-});
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-function TooltipCard({
-  children,
-  className,
-  containerClassName,
-  content,
-  triggerClassName,
-  delayDuration = 150,
-  side = "top",
-  align = "center",
-  sideOffset = 10,
-  ...tooltipProps
-}) {
-  return /* @__PURE__ */ jsxs(Tooltip, { delayDuration, ...tooltipProps, children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "inline cursor-help appearance-none border-0 bg-transparent p-0 align-baseline font-medium text-inherit underline decoration-current/35 underline-offset-4 transition-colors",
-          "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          className,
-          triggerClassName
-        ),
-        "data-slot": "tooltip-card-trigger",
-        children
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      TooltipContent,
-      {
-        align,
-        className: cn(
-          "max-w-sm rounded-box border border-border bg-popover px-4 py-3 text-popover-foreground shadow-xl",
-          "text-sm leading-6 font-normal",
-          containerClassName
-        ),
-        "data-slot": "tooltip-card-content",
-        side,
-        sideOffset,
-        children: typeof content === "string" ? /* @__PURE__ */ jsx("p", { "data-slot": "tooltip-card-text", children: content }) : content
-      }
-    )
-  ] });
 }
 
 // src/config/theme.ts
@@ -5874,4 +6174,4 @@ function NoWidowProvider({
   return children ?? null;
 }
 
-export { Autocomplete, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CohortCard, CompanyNameEditableCell, ContactInfo, DataStateBanner, DataStateInline, DeleteConfirmationDialog, DisclosureFootnotes, DisplayField, DisplayFieldGroup, DraggableCardBody, DraggableCardContainer, DraggableStickyModal, EditableCell, FeedbackButton, FeedbackDialog, FormDialog, GooeyInput, HelpArticleIndex, HelpArticleView, HelpButton, HelpProvider, HelpSearchResults, HelpTooltip, HoverEffect, HoverEffectCard, HoverEffectCardDescription, HoverEffectCardTitle, InfoTooltip, InlineEditableDate, InlineEditableSelect, InlineEditableText, LocationMap, MFAChallenge, MFARecovery, NoWidowProvider, NoWidowText, NumberStepper, PageLoader, PageSection, PageSections, ProfileSection, Progress, RadioGroup, RadioGroupItem, Section, SignOutButton, Slider, SocialIcon, StatCard, StatCardsContainer, TextHighlight, ToggleGroup, ToggleGroupItem, TooltipCard, UserNameEditableCell, animation, applyNoWidowText, borderRadius, breakpoints2 as breakpoints, colorfulTheme, compassThemeConfig, darkTheme, defaultThemes, deuteranopiaTheme, getColorScheme, getDefaultTheme, highContrastDarkTheme, highContrastTheme, layout, lightTheme, preventWidowsInReactNode, protanopiaTheme, shadows, socialPlatforms, spacing, theme, tritanopiaTheme, typography, useHelp, zIndex, zenbidThemeConfig };
+export { Autocomplete, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CohortCard, CompanyNameEditableCell, ContactInfo, DataStateBanner, DataStateInline, DeleteConfirmationDialog, DisclosureFootnotes, DisplayField, DisplayFieldGroup, DraggableCardBody, DraggableCardContainer, DraggableStickyModal, EditableCell, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FeedbackButton, FeedbackDialog, FormDialog, GooeyInput, HelpArticleIndex, HelpArticleView, HelpButton, HelpProvider, HelpSearchResults, HelpTooltip, HoverEffect, HoverEffectCard, HoverEffectCardDescription, HoverEffectCardTitle, InfoTooltip, InlineEditableDate, InlineEditableSelect, InlineEditableText, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, LocationMap, MFAChallenge, MFARecovery, NoWidowProvider, NoWidowText, NumberStepper, PageLoader, PageSection, PageSections, ProfileSection, Progress, RadioGroup, RadioGroupItem, Section, SignOutButton, SocialIcon, StatCard, StatCardsContainer, TextHighlight, Toggle, ToggleGroup, ToggleGroupItem, TooltipCard, UserNameEditableCell, animation, applyNoWidowText, borderRadius, breakpoints2 as breakpoints, buttonGroupVariants, colorfulTheme, compassThemeConfig, darkTheme, defaultThemes, deuteranopiaTheme, getColorScheme, getDefaultTheme, highContrastDarkTheme, highContrastTheme, layout, lightTheme, preventWidowsInReactNode, protanopiaTheme, shadows, socialPlatforms, spacing, theme, toggleVariants, tritanopiaTheme, typography, useHelp, zIndex, zenbidThemeConfig };