@jmruthers/pace-core 0.6.6 → 0.6.7

package/dist/{chunk-LAZMKTTF.js → chunk-JGWDVX64.js}

@@ -1,31 +1,33 @@
-import { AccessDenied } from './chunk-4T7OBVTU.js';
-import { Input, Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter, Card, CardHeader, CardTitle, CardDescription, CardContent, Alert, AlertDescription, CardFooter, Select, SelectTrigger, SelectContent, SelectLabel, SelectSeparator, SelectItem, DialogTitle, SelectValue, deriveFormKey, useSessionDraft, filterSensitiveFields, isSensitiveField, SelectGroup, AlertTitle } from './chunk-ZS5VO5JB.js';
-import { Button, useRBAC, useResolvedScope, usePermissions, useEvents, useCan } from './chunk-7TYHROIV.js';
-import { useAddressAutocomplete, createFileReferenceService, uploadFileWithReference, usePublicFileDisplay, useFileDisplay, getPublicUrl, getSignedUrl, generateFileUrlsBatch, useEventTheme, usePreventTabReload } from './chunk-FENMYN2U.js';
-import { clearPalette } from './chunk-BVP2BCJF.js';
+import { AccessDenied } from './chunk-6F3IILHI.js';
+import { Input, Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Alert, AlertDescription, Label, SelectLabel, SelectSeparator, DialogTitle, deriveFormKey, useSessionDraft, filterSensitiveFields, isSensitiveField, SelectGroup, AlertTitle, Progress } from './chunk-Q7Q7V5NV.js';
+import { Button, useRBAC, useResolvedScope, usePermissions, useEvents, useCan } from './chunk-BM4CQ5P3.js';
+import { useAddressAutocomplete, createFileReferenceService, uploadFileWithReference, usePublicFileDisplay, useFileDisplay, getPublicUrl, getSignedUrl, generateFileUrlsBatch, useEventTheme, usePreventTabReload } from './chunk-5X4QLXRG.js';
+import { clearPalette } from './chunk-ZKAWKYT4.js';
 import { useToast } from './chunk-S7DKJPLT.js';
-import { useIsPublicPage, PublicPageContext, useAppConfig, ErrorBoundary } from './chunk-3O3WHILE.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, useIsPublicPage, PublicPageContext, useAppConfig, ErrorBoundary } from './chunk-VBCS3DUA.js';
 import { useUnifiedAuth, useOrganisations, UnifiedAuthContext, EventServiceContext, useSessionRestoration } from './chunk-FTCRZOG2.js';
 import { EventContextRequiredError, OrganisationContextRequiredError, isSuperAdmin } from './chunk-ZFYPMX46.js';
 import { assertAppId } from './chunk-4SXLQIZO.js';
-import { LoadingSpinner, getAppId } from './chunk-2HGJFNAH.js';
-import { cn, getCurrentAppName } from './chunk-A55DK444.js';
+import { getAppId } from './chunk-FEJLJNWA.js';
+import { LoadingSpinner } from './chunk-A3W6LW53.js';
+import { getCurrentAppName } from './chunk-OJ4SKRSV.js';
+import { cn } from './chunk-7ILTDCL2.js';
 import { createLogger, logger } from './chunk-TTRFSOKR.js';
-import * as React7 from 'react';
-import React7__default, { useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
+import * as React6 from 'react';
+import React6__default, { useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { FileText, ExternalLink, X, ChevronDown, KeyRound, LogOut, Calendar as Calendar$1, Building2, AlertCircle, RefreshCw } from 'lucide-react';
+import { FileText, ExternalLink, X, ChevronDown, KeyRound, LogOut, AlertCircle, RefreshCw, Calendar as Calendar$1, Building2, File, Check } from 'lucide-react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { useDayPicker, DayPicker } from 'react-day-picker';
 import { enAU } from 'date-fns/locale';
+import { format } from 'date-fns';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { useForm, useWatch, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLocation, Link, useNavigate, Outlet, Navigate } from 'react-router-dom';
 
-var AddressField = React7.forwardRef(
+var AddressField = React6.forwardRef(
   ({
     apiKey,
     value: controlledValue,
@@ -44,13 +46,13 @@ var AddressField = React7.forwardRef(
     cacheTTL,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React7.useState(defaultValue);
-    const [isOpen, setIsOpen] = React7.useState(false);
-    const [selectedIndex, setSelectedIndex] = React7.useState(-1);
-    const [inputFocused, setInputFocused] = React7.useState(false);
-    const inputRef = React7.useRef(null);
-    const suggestionsRef = React7.useRef(null);
-    const containerRef = React7.useRef(null);
+    const [internalValue, setInternalValue] = React6.useState(defaultValue);
+    const [isOpen, setIsOpen] = React6.useState(false);
+    const [selectedIndex, setSelectedIndex] = React6.useState(-1);
+    const [inputFocused, setInputFocused] = React6.useState(false);
+    const inputRef = React6.useRef(null);
+    const suggestionsRef = React6.useRef(null);
+    const containerRef = React6.useRef(null);
     const value = controlledValue !== void 0 ? controlledValue : internalValue;
     const { suggestions, isLoading, error: autocompleteError, selectAddress, clearSuggestions } = useAddressAutocomplete(apiKey, value, {
       autocompleteOptions,
@@ -58,14 +60,14 @@ var AddressField = React7.forwardRef(
       cacheEnabled,
       cacheTTL
     });
-    React7.useEffect(() => {
+    React6.useEffect(() => {
       if (suggestions.length > 0 && inputFocused && value.trim()) {
         setIsOpen(true);
       } else if (suggestions.length === 0 || !value.trim()) {
         setIsOpen(false);
       }
     }, [suggestions, inputFocused, value]);
-    const handleInputChange = React7.useCallback(
+    const handleInputChange = React6.useCallback(
       (e) => {
         const newValue = e.target.value;
         if (controlledValue === void 0) {
@@ -80,7 +82,7 @@ var AddressField = React7.forwardRef(
       },
       [controlledValue, onInputChange, onChange, clearSuggestions]
     );
-    const handleSelectAddress = React7.useCallback(
+    const handleSelectAddress = React6.useCallback(
       async (placeId) => {
         setIsOpen(false);
         setSelectedIndex(-1);
@@ -97,7 +99,7 @@ var AddressField = React7.forwardRef(
       },
       [selectAddress, onChange, onInputChange, controlledValue]
     );
-    const handleKeyDown = React7.useCallback(
+    const handleKeyDown = React6.useCallback(
       (e) => {
         if (!isOpen || suggestions.length === 0) {
           if (e.key === "Escape") {
@@ -135,13 +137,13 @@ var AddressField = React7.forwardRef(
       },
       [isOpen, suggestions, selectedIndex, handleSelectAddress]
     );
-    const handleFocus = React7.useCallback(() => {
+    const handleFocus = React6.useCallback(() => {
       setInputFocused(true);
       if (suggestions.length > 0 && value.trim()) {
         setIsOpen(true);
       }
     }, [suggestions, value]);
-    const handleBlur = React7.useCallback(
+    const handleBlur = React6.useCallback(
       (e) => {
         setTimeout(() => {
           if (!containerRef.current?.contains(document.activeElement)) {
@@ -153,7 +155,7 @@ var AddressField = React7.forwardRef(
       },
       []
     );
-    React7.useEffect(() => {
+    React6.useEffect(() => {
       const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
           setIsOpen(false);
@@ -167,8 +169,8 @@ var AddressField = React7.forwardRef(
         };
       }
     }, [isOpen]);
-    const suggestionsId = React7.useId();
-    React7.useEffect(() => {
+    const suggestionsId = React6.useId();
+    React6.useEffect(() => {
       if (selectedIndex >= 0) {
         const selectedItem = document.getElementById(
           `${suggestionsId}-item-${selectedIndex}`
@@ -178,7 +180,7 @@ var AddressField = React7.forwardRef(
         }
       }
     }, [selectedIndex, suggestionsId]);
-    React7.useImperativeHandle(ref, () => inputRef.current);
+    React6.useImperativeHandle(ref, () => inputRef.current);
     const hasError = error || !!autocompleteError;
     return /* @__PURE__ */ jsxs("form", { ref: containerRef, className: cn("relative w-full", className), children: [
       /* @__PURE__ */ jsx(
@@ -218,7 +220,7 @@ var AddressField = React7.forwardRef(
             "list-none p-0 m-0"
           ),
           "data-testid": "address-suggestions",
-          children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+          children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
             /* @__PURE__ */ jsx(
               "dt",
               {
@@ -247,65 +249,6 @@ var AddressField = React7.forwardRef(
   }
 );
 AddressField.displayName = "AddressField";
-var getLabelClasses = () => {
-  return "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
-};
-var Label = React7.forwardRef(({
-  className,
-  required = false,
-  requiredIndicator,
-  hideRequiredIndicator = false,
-  helperText,
-  helperTextClassName,
-  error,
-  errorClassName,
-  children,
-  htmlFor,
-  ...props
-}, ref) => {
-  const hasError = !!error;
-  const showHelperText = helperText && !hasError;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      LabelPrimitive.Root,
-      {
-        ref,
-        className: cn(
-          getLabelClasses(),
-          hasError && "text-destructive",
-          className
-        ),
-        htmlFor,
-        ...props,
-        children: [
-          children,
-          required && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-label": "required",
-              className: cn(
-                "text-destructive ml-1",
-                hideRequiredIndicator && "sr-only"
-              ),
-              children: requiredIndicator || "*"
-            }
-          )
-        ]
-      }
-    ),
-    showHelperText && /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", helperTextClassName), children: helperText }),
-    hasError && /* @__PURE__ */ jsx(
-      "p",
-      {
-        role: "alert",
-        "aria-live": "polite",
-        className: cn("text-destructive", errorClassName),
-        children: error
-      }
-    )
-  ] });
-});
-Label.displayName = LabelPrimitive.Root.displayName;
 function Textarea({ className, variant = "default", size = "md", error, ref, ...props }) {
   return /* @__PURE__ */ jsx(
     "textarea",
@@ -426,7 +369,7 @@ function defaultGenerateFallbackText(fileName) {
   if (words.length === 0) return "FL";
   return words.map((word) => word.charAt(0).toUpperCase()).join("").substring(0, 3);
 }
-var FileDisplayContent = React7__default.memo(function FileDisplayContent2({
+var FileDisplayContent = React6__default.memo(function FileDisplayContent2({
   isLoading,
   error,
   fileUrl,
@@ -1449,7 +1392,7 @@ var sizeClasses = {
   xl: "size-16 text-xl",
   "2xl": "size-20 text-2xl"
 };
-var Avatar = React7.forwardRef(
+var Avatar = React6.forwardRef(
   ({
     table_name,
     record_id,
@@ -1463,7 +1406,7 @@ var Avatar = React7.forwardRef(
     size = "md",
     ...props
   }, ref) => {
-    const [imageError, setImageError] = React7.useState(false);
+    const [imageError, setImageError] = React6.useState(false);
     const { supabase } = useUnifiedAuth();
     const canFetchFileId = Boolean(fileId && organisation_id && supabase);
     const { fileReference, fileUrl: fileIdUrl, isLoading: fileIdLoading } = useFileReferenceById(
@@ -1480,10 +1423,10 @@ var Avatar = React7.forwardRef(
     const fallbackClasses = "size-full grid place-items-center text-center text-sec-50 bg-sec-500";
     const imageClasses = "object-cover size-full";
     const containerClasses = cn(baseClasses, className);
-    const handleImageError = React7.useCallback(() => {
+    const handleImageError = React6.useCallback(() => {
       setImageError(true);
     }, []);
-    React7.useEffect(() => {
+    React6.useEffect(() => {
       if (src) {
         setImageError(false);
       }
@@ -1632,7 +1575,7 @@ function Badge({ className, variant = "solid-main-normal", ref, ...props }) {
   );
 }
 Badge.displayName = "Badge";
-var Switch = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitive.Root,
   {
     className: cn(
@@ -1673,9 +1616,9 @@ var Switch = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Switch.displayName = SwitchPrimitive.Root.displayName;
-var Tabs = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { asChild: true, ...props, children: /* @__PURE__ */ jsx("section", { ref, className, children }) }));
+var Tabs = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { asChild: true, ...props, children: /* @__PURE__ */ jsx("section", { ref, className, children }) }));
 Tabs.displayName = TabsPrimitive.Root.displayName || "Tabs";
-var TabsList = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.List, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
+var TabsList = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.List, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
   "nav",
   {
     ref,
@@ -1687,7 +1630,7 @@ var TabsList = React7.forwardRef(({ className, children, ...props }, ref) => /*
   }
 ) }));
 TabsList.displayName = TabsPrimitive.List.displayName || "TabsList";
-var TabsTrigger = React7.forwardRef(({ className, variant, size, children, ...props }, ref) => {
+var TabsTrigger = React6.forwardRef(({ className, variant, size, children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
     Button,
     {
@@ -1706,7 +1649,7 @@ var TabsTrigger = React7.forwardRef(({ className, variant, size, children, ...pr
   ) });
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName || "TabsTrigger";
-var TabsContent = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
+var TabsContent = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
   "aside",
   {
     ref,
@@ -1728,10 +1671,10 @@ var assignToRef = (ref, value) => {
   }
   ref.current = value;
 };
-var Calendar = React7.forwardRef(
-  ({ className, classNames, mode, components, locale, month: controlledMonth, onMonthChange: controlledOnMonthChange, onSelect, ...props }, ref) => {
-    const tableRef = React7.useRef(null);
-    const setForwardedRef = React7.useCallback(
+var Calendar = React6.forwardRef(
+  ({ className, classNames, mode, components, locale, month: controlledMonth, onMonthChange: controlledOnMonthChange, onSelect, captionLayout, startMonth, endMonth, ...props }, ref) => {
+    const tableRef = React6.useRef(null);
+    const setForwardedRef = React6.useCallback(
       (node) => {
         tableRef.current = node;
         if (!ref) {
@@ -1745,14 +1688,14 @@ var Calendar = React7.forwardRef(
       },
       [ref]
     );
-    const rootPropsRef = React7.useRef(null);
+    const rootPropsRef = React6.useRef(null);
     const selected = props.selected;
     const isMonthControlled = controlledMonth !== void 0;
-    const [internalMonth, setInternalMonth] = React7.useState(() => {
+    const [internalMonth, setInternalMonth] = React6.useState(() => {
       const now = /* @__PURE__ */ new Date();
       return new Date(now.getFullYear(), now.getMonth(), 1);
     });
-    const month = React7.useMemo(() => {
+    const month = React6.useMemo(() => {
       const monthToUse = isMonthControlled ? controlledMonth : internalMonth;
       if (!monthToUse) {
         const now = /* @__PURE__ */ new Date();
@@ -1761,16 +1704,16 @@ var Calendar = React7.forwardRef(
       const normalized = new Date(monthToUse.getFullYear(), monthToUse.getMonth(), 1);
       return normalized;
     }, [isMonthControlled, controlledMonth, internalMonth]);
-    const handleMonthChange = React7.useCallback((newMonth) => {
+    const handleMonthChange = React6.useCallback((newMonth) => {
       if (!isMonthControlled) {
         setInternalMonth(newMonth);
       }
       controlledOnMonthChange?.(newMonth);
     }, [isMonthControlled, controlledOnMonthChange]);
-    const wrappedHandleMonthChange = React7.useCallback((newMonth) => {
+    const wrappedHandleMonthChange = React6.useCallback((newMonth) => {
       handleMonthChange(newMonth);
     }, [handleMonthChange]);
-    const CustomRoot = React7.memo(({ children, rootRef: dayPickerRootRef, ...rootProps }) => {
+    const CustomRoot = React6.memo(({ children, rootRef: dayPickerRootRef, ...rootProps }) => {
       const {
         className: rootClassName,
         style: rootStyle,
@@ -1786,29 +1729,100 @@ var Calendar = React7.forwardRef(
       return /* @__PURE__ */ jsx(Fragment, { children });
     });
     CustomRoot.displayName = "CustomRoot";
-    const CustomMonths = React7.memo(({ children }) => {
-      return /* @__PURE__ */ jsx(Fragment, { children });
+    const CustomMonths = React6.memo(({ children }) => {
+      const childrenArray = React6.Children.toArray(children);
+      const filteredChildren = childrenArray.filter((child) => {
+        if (!React6.isValidElement(child)) return true;
+        const childType = child.type;
+        const displayName = childType?.displayName || childType?.name;
+        if (displayName === "MonthCaption" || displayName === "Dropdown" || displayName === "DropdownMonth" || displayName === "DropdownYear" || typeof childType === "string" && childType.includes("dropdown")) {
+          return false;
+        }
+        if (childType === "div") {
+          const childProps = child.props;
+          if (childProps?.children) {
+            const childChildren = React6.Children.toArray(childProps.children);
+            const hasCaptionSpan = childChildren.some((cc) => {
+              if (!React6.isValidElement(cc) || cc.type !== "span") return false;
+              const spanProps = cc.props;
+              return spanProps?.role === "status" && spanProps?.["aria-live"] === "polite";
+            });
+            if (hasCaptionSpan) {
+              return false;
+            }
+          }
+        }
+        return true;
+      });
+      return /* @__PURE__ */ jsx(Fragment, { children: filteredChildren });
     });
     CustomMonths.displayName = "CustomMonths";
-    const CustomMonthGrid = React7.forwardRef((props2, forwardedRef) => {
+    const CustomMonthGrid = React6.forwardRef((props2, forwardedRef) => {
       return /* @__PURE__ */ jsx("table", { ref: forwardedRef, ...props2 });
     });
     CustomMonthGrid.displayName = "CustomMonthGrid";
-    const CustomMonth = React7.memo(({ calendarMonth, displayIndex, className: className2, children }) => {
+    const CustomMonthCaption = React6.memo(({ displayMonth, startMonth: captionStartMonth, endMonth: captionEndMonth, locale: captionLocale }) => {
+      const { goToMonth } = useDayPicker();
+      const calendarLocale = captionLocale || enAU;
+      const fromDate = captionStartMonth || new Date(1900, 0);
+      const toDate = captionEndMonth || new Date(2100, 11);
+      const monthOptions = React6.useMemo(() => {
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+          const monthDate = new Date(displayMonth.getFullYear(), i, 1);
+          const label = format(monthDate, "MMMM", { locale: calendarLocale });
+          months.push({ value: i.toString(), label });
+        }
+        return months;
+      }, [calendarLocale, displayMonth]);
+      const yearOptions = React6.useMemo(() => {
+        const years = [];
+        const startYear = fromDate.getFullYear();
+        const endYear = toDate.getFullYear();
+        for (let year = startYear; year <= endYear; year++) {
+          years.push({ value: year.toString(), label: year.toString() });
+        }
+        return years;
+      }, [fromDate, toDate]);
+      const currentMonth = displayMonth.getMonth();
+      const currentYear = displayMonth.getFullYear();
+      const handleMonthChange2 = React6.useCallback((value) => {
+        const newMonth = parseInt(value, 10);
+        const newDate = new Date(currentYear, newMonth, 1);
+        goToMonth(newDate);
+      }, [currentYear, goToMonth]);
+      const handleYearChange = React6.useCallback((value) => {
+        const newYear = parseInt(value, 10);
+        const newDate = new Date(newYear, currentMonth, 1);
+        goToMonth(newDate);
+      }, [currentMonth, goToMonth]);
+      return /* @__PURE__ */ jsxs("nav", { className: "relative flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs(Select, { value: currentMonth.toString(), onValueChange: handleMonthChange2, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto min-w-[120px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: monthOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ] }),
+        /* @__PURE__ */ jsxs(Select, { value: currentYear.toString(), onValueChange: handleYearChange, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto min-w-[100px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: yearOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ] })
+      ] });
+    });
+    CustomMonthCaption.displayName = "CustomMonthCaption";
+    const CustomMonth = React6.memo(({ calendarMonth, displayIndex, className: className2, children, captionLayout: monthCaptionLayout, startMonth: monthStartMonth, endMonth: monthEndMonth }) => {
       const { formatters, components: components2, labels, classNames: classNames2, previousMonth, nextMonth, goToMonth } = useDayPicker();
       const caption = formatters.formatCaption(calendarMonth.date, {});
       const Chevron = components2?.Chevron;
-      const childrenArray = React7.Children.toArray(children);
+      const childrenArray = React6.Children.toArray(children);
       const monthGridIndex = childrenArray.findIndex((child) => {
-        if (!React7.isValidElement(child)) return false;
+        if (!React6.isValidElement(child)) return false;
         const childType = child.type;
         return typeof childType === "function" && childType.displayName === "MonthGrid" || child.type === "table";
       });
       return /* @__PURE__ */ jsx(Fragment, { children: childrenArray.map((child, index) => {
-        if (React7.isValidElement(child) && child.type?.displayName === "MonthCaption") {
+        if (React6.isValidElement(child) && child.type?.displayName === "MonthCaption") {
           return null;
         }
-        if (index === monthGridIndex && React7.isValidElement(child)) {
+        if (index === monthGridIndex && React6.isValidElement(child)) {
           const monthGridChild = child;
           const applyRootProps = displayIndex === 0 && index === monthGridIndex;
           const storedRootProps = applyRootProps ? rootPropsRef.current : null;
@@ -1858,7 +1872,8 @@ var Calendar = React7.forwardRef(
             }
             assignToRef(monthGridElement.ref, node);
           } : void 0;
-          return React7.cloneElement(
+          const isDropdownLayout = monthCaptionLayout === "dropdown";
+          return React6.cloneElement(
             monthGridElement,
             {
               key: child.key ?? `month-grid-${displayIndex}`,
@@ -1866,7 +1881,15 @@ var Calendar = React7.forwardRef(
               ...mergedRef ? { ref: mergedRef } : {}
             },
             /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("caption", { className: "relative", children: /* @__PURE__ */ jsxs("nav", { className: "relative flex items-center justify-center gap-1", children: [
+              /* @__PURE__ */ jsx("caption", { className: "relative", children: isDropdownLayout ? /* @__PURE__ */ jsx(
+                CustomMonthCaption,
+                {
+                  displayMonth: calendarMonth.date,
+                  startMonth: monthStartMonth,
+                  endMonth: monthEndMonth,
+                  locale
+                }
+              ) : /* @__PURE__ */ jsxs("nav", { className: "relative flex items-center justify-center gap-1", children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -1913,24 +1936,40 @@ var Calendar = React7.forwardRef(
             ] })
           );
         }
-        return React7.isValidElement(child) ? React7.cloneElement(child, { key: child.key ?? `calendar-child-${index}` }) : child;
+        return React6.isValidElement(child) ? React6.cloneElement(child, { key: child.key ?? `calendar-child-${index}` }) : child;
       }) });
     });
     CustomMonth.displayName = "CustomMonth";
-    const CustomWeekdays = React7.memo(({ className: className2, children, ...props2 }) => {
+    const CustomWeekdays = React6.memo(({ className: className2, children, ...props2 }) => {
       return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: cn("text-xs text-sec-500", className2), ...props2, children }) });
     });
     CustomWeekdays.displayName = "CustomWeekdays";
-    const defaultComponents = React7.useMemo(() => ({
+    const CustomMonthWithProps = React6.useCallback((props2) => {
+      return /* @__PURE__ */ jsx(
+        CustomMonth,
+        {
+          ...props2,
+          captionLayout,
+          startMonth,
+          endMonth
+        }
+      );
+    }, [captionLayout, startMonth, endMonth]);
+    const CustomMonthCaptionWrapper = React6.memo((_props) => {
+      return null;
+    });
+    CustomMonthCaptionWrapper.displayName = "CustomMonthCaptionWrapper";
+    const defaultComponents = React6.useMemo(() => ({
       Root: CustomRoot,
       Months: CustomMonths,
-      Month: CustomMonth,
+      Month: CustomMonthWithProps,
       MonthGrid: CustomMonthGrid,
-      // MonthCaption is now handled inside CustomMonth (injected into table)
+      // MonthCaption returns null - actual caption is rendered in CustomMonth inside <caption>
+      MonthCaption: CustomMonthCaptionWrapper,
       Weekdays: CustomWeekdays,
       // Spread user components AFTER ours so ours take precedence
       ...components || {}
-    }), [components, CustomRoot, CustomMonths, CustomMonth, CustomWeekdays]);
+    }), [components, CustomRoot, CustomMonths, CustomMonthWithProps, CustomMonthCaptionWrapper, CustomWeekdays]);
     return /* @__PURE__ */ jsx(
       DayPicker,
       {
@@ -2008,7 +2047,7 @@ var Calendar = React7.forwardRef(
 );
 Calendar.displayName = "Calendar";
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastViewport = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -2021,7 +2060,7 @@ var ToastViewport = React7.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var Toast = React7.forwardRef(({ className, ...props }, ref) => {
+var Toast = React6.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Root,
     {
@@ -2036,7 +2075,7 @@ var Toast = React7.forwardRef(({ className, ...props }, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastAction = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Action,
   {
     ref,
@@ -2049,7 +2088,7 @@ var ToastAction = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastClose = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Close,
   {
     ref,
@@ -2064,7 +2103,7 @@ var ToastClose = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Title,
   {
     ref,
@@ -2074,7 +2113,7 @@ var ToastTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Description,
   {
     ref,
@@ -2438,7 +2477,7 @@ function FormField({
     )
   ] });
 }
-var LoginForm = React7__default.memo(({
+var LoginForm = React6__default.memo(({
   onSignIn,
   onSuccess,
   onError,
@@ -2578,36 +2617,6 @@ function ContextSelector({
     }
     return "";
   }, [showOrganisations, showEvents, selectedOrganisation?.id, selectedEvent]);
-  const displayValue = useMemo(() => {
-    if (showEvents && selectedEvent) {
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Calendar$1, { className: "size-4 flex-shrink-0" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedEvent.event_name })
-      ] });
-    }
-    if (showOrganisations && selectedOrganisation) {
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Building2, { className: "size-4 flex-shrink-0" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOrganisation.display_name })
-      ] });
-    }
-    return null;
-  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
-  const effectivePlaceholder = useMemo(() => {
-    if (placeholder !== "Select organisation or event") {
-      return placeholder;
-    }
-    if (showOrganisations && showEvents) {
-      return "Select organisation or event";
-    }
-    if (showOrganisations) {
-      return "Select organisation";
-    }
-    if (showEvents) {
-      return "Select event";
-    }
-    return placeholder;
-  }, [placeholder, showOrganisations, showEvents]);
   const handleValueChange = (value) => {
     if (disabled || isLoading) return;
     if (value.startsWith("org:") && showOrganisations) {
@@ -2638,8 +2647,9 @@ function ContextSelector({
   };
   if (isLoading && !hasItems) {
     const loadingText = compact ? "Loading..." : showOrganisations && showEvents ? "Loading organisations and events..." : showOrganisations ? "Loading organisations..." : "Loading events...";
-    return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    return /* @__PURE__ */ jsxs("p", { className, children: [
       /* @__PURE__ */ jsx(LoadingSpinner, { size: "sm" }),
+      /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: loadingText })
     ] });
   }
@@ -2651,11 +2661,9 @@ function ContextSelector({
     if (showEvents && eventError) {
       errorMessages.push(`Failed to load events: ${eventError.message}`);
     }
-    return /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className}`, children: [
-      /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-        /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
-        /* @__PURE__ */ jsx(AlertDescription, { children: errorMessages.join(" ") })
-      ] }),
+    return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: `space-y-2 ${className}`, children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
+      /* @__PURE__ */ jsx(AlertDescription, { children: errorMessages.join(" ") }),
       showRetryButton && /* @__PURE__ */ jsxs(
         Button,
         {
@@ -2675,11 +2683,9 @@ function ContextSelector({
   if (!hasItems) {
     if (showNoItemsMessage) {
       const noItemsText = showOrganisations && showEvents ? "No organisations or events available. Please contact your administrator." : showOrganisations ? "No organisations available. Please contact your administrator." : "No events available. Please contact your administrator.";
-      return /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className}`, children: [
-        /* @__PURE__ */ jsxs(Alert, { children: [
-          /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
-          /* @__PURE__ */ jsx(AlertDescription, { children: noItemsText })
-        ] }),
+      return /* @__PURE__ */ jsxs(Alert, { className: `space-y-2 ${className}`, children: [
+        /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: noItemsText }),
         showRetryButton && /* @__PURE__ */ jsxs(
           Button,
           {
@@ -2698,12 +2704,44 @@ function ContextSelector({
     }
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className, "data-testid": "context-selector", children: /* @__PURE__ */ jsxs(
+  const displayValue = useMemo(() => {
+    if (showEvents && selectedEvent) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Calendar$1, { className: "inline-block size-4 mr-2" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedEvent.event_name })
+      ] });
+    }
+    if (showOrganisations && selectedOrganisation) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Building2, { className: "inline-block size-4 mr-2" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOrganisation.display_name })
+      ] });
+    }
+    return null;
+  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
+  const effectivePlaceholder = useMemo(() => {
+    if (placeholder !== "Select organisation or event") {
+      return placeholder;
+    }
+    if (showOrganisations && showEvents) {
+      return "Select organisation or event";
+    }
+    if (showOrganisations) {
+      return "Select organisation";
+    }
+    if (showEvents) {
+      return "Select event";
+    }
+    return placeholder;
+  }, [placeholder, showOrganisations, showEvents]);
+  return /* @__PURE__ */ jsxs(
     Select,
     {
       value: currentValue,
       onValueChange: handleValueChange,
       disabled: disabled || isLoading,
+      className,
+      "data-testid": "context-selector",
       children: [
         /* @__PURE__ */ jsx(
           SelectTrigger,
@@ -2717,17 +2755,16 @@ function ContextSelector({
           showOrganisations && organisations && organisations.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(SelectGroup, { children: [
               /* @__PURE__ */ jsx(SelectLabel, { children: "Organisations" }),
-              organisations.map((org) => /* @__PURE__ */ jsx(
+              organisations.map((org) => /* @__PURE__ */ jsxs(
                 SelectItem,
                 {
                   value: `org:${org.id}`,
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(Building2, { className: "size-4" }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: org.display_name }),
-                      !compact && org.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate max-w-40", children: org.description })
-                    ] })
-                  ] })
+                  children: [
+                    /* @__PURE__ */ jsx(Building2, { className: "inline-block size-4 mr-2" }),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: org.display_name }),
+                    /* @__PURE__ */ jsx("br", {}),
+                    !compact && org.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: org.description })
+                  ]
                 },
                 org.id
               ))
@@ -2736,17 +2773,16 @@ function ContextSelector({
           ] }),
           showEvents && events && events.length > 0 && /* @__PURE__ */ jsxs(SelectGroup, { children: [
             /* @__PURE__ */ jsx(SelectLabel, { children: "Events" }),
-            events.map((event) => /* @__PURE__ */ jsx(
+            events.map((event) => /* @__PURE__ */ jsxs(
               SelectItem,
               {
                 value: `event:${event.event_id || event.id}`,
-                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(Calendar$1, { className: "size-4" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: event.event_name }),
-                    !compact && event.event_date && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(event.event_date).toLocaleDateString() })
-                  ] })
-                ] })
+                children: [
+                  /* @__PURE__ */ jsx(Calendar$1, { className: " inline-block size-4 mr-2" }),
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: event.event_name }),
+                  /* @__PURE__ */ jsx("br", {}),
+                  !compact && event.event_date && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(event.event_date).toLocaleDateString() })
+                ]
               },
               event.event_id || event.id
             ))
@@ -2754,7 +2790,7 @@ function ContextSelector({
         ] })
       ]
     }
-  ) });
+  );
 }
 function PasswordChangeForm({ onSubmit, onSuccess, className }) {
   const [newPassword, setNewPassword] = useState("");
@@ -2830,7 +2866,7 @@ function PasswordChangeForm({ onSubmit, onSuccess, className }) {
     )
   ] });
 }
-var UserMenu = React7__default.memo(function UserMenu2({
+var UserMenu = React6__default.memo(function UserMenu2({
   user,
   onSignOut,
   onChangePassword,
@@ -2912,7 +2948,7 @@ var UserMenu = React7__default.memo(function UserMenu2({
     ] }) })
   ] });
 });
-var UserMenuLoading = React7__default.memo(function UserMenuLoading2() {
+var UserMenuLoading = React6__default.memo(function UserMenuLoading2() {
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -2935,8 +2971,8 @@ function useNavigationFiltering({
   itemsPreFiltered = false,
   auditLog = true
 }) {
-  const [resolvedAppId, setResolvedAppId] = React7.useState(void 0);
-  const previousFilteredItemsRef = React7.useRef([]);
+  const [resolvedAppId, setResolvedAppId] = React6.useState(void 0);
+  const previousFilteredItemsRef = React6.useRef([]);
   const authContext = useUnifiedAuth();
   const rbacContext = useRBAC();
   const eventLoadingRaw = authContext?.eventLoading;
@@ -2951,7 +2987,7 @@ function useNavigationFiltering({
     selectedEventId: itemsPreFiltered ? null : selectedEvent?.event_id || null,
     selectedEventOrganisationId: itemsPreFiltered ? null : selectedEvent?.organisation_id || null
   });
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (!scopeLoading && !resolvedScope?.appId && selectedOrganisation?.id && authContext?.appName && authContext?.user?.id && !resolvedAppId) {
       if (!authContext.user || !authContext.appName) {
         return;
@@ -2979,7 +3015,7 @@ function useNavigationFiltering({
     authContext?.user?.id,
     resolvedAppId
   ]);
-  const effectiveScope = React7.useMemo(() => {
+  const effectiveScope = React6.useMemo(() => {
     if (resolvedScope?.organisationId) {
       return resolvedScope;
     }
@@ -2994,7 +3030,7 @@ function useNavigationFiltering({
     return null;
   }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
   const scopeKey = effectiveScope ? `${effectiveScope.organisationId || ""}-${effectiveScope.eventId || ""}-${effectiveScope.appId || ""}` : "empty";
-  const stableScope = React7.useMemo(() => {
+  const stableScope = React6.useMemo(() => {
     if (effectiveScope?.organisationId) {
       return {
         organisationId: effectiveScope.organisationId,
@@ -3020,7 +3056,7 @@ function useNavigationFiltering({
     itemsPreFiltered ? void 0 : stableScope.eventId,
     itemsPreFiltered ? void 0 : stableScope.appId
   );
-  const filteredItems = React7.useMemo(() => {
+  const filteredItems = React6.useMemo(() => {
     if (itemsPreFiltered && items && items.length > 0) {
       const visibleItems = (items || []).filter((item) => !item.meta?.hidden);
       previousFilteredItemsRef.current = visibleItems;
@@ -3199,7 +3235,7 @@ function useNavigationFiltering({
     hasAnyPermission: hasAnyPermission || null
   };
 }
-var NavigationMenu = React7.forwardRef(({
+var NavigationMenu = React6.forwardRef(({
   items,
   mode = "dropdown",
   currentPath,
@@ -3217,8 +3253,8 @@ var NavigationMenu = React7.forwardRef(({
   itemsPreFiltered = false,
   ...props
 }, ref) => {
-  const [expandedItems, setExpandedItems] = React7.useState(/* @__PURE__ */ new Set());
-  const buttonRef = React7.useRef(null);
+  const [expandedItems, setExpandedItems] = React6.useState(/* @__PURE__ */ new Set());
+  const buttonRef = React6.useRef(null);
   const { authContext, rbacContext, filteredItems, permissionMap, hasAnyPermission } = useNavigationFiltering({ items, itemsPreFiltered, auditLog });
   const handleHierarchicalKeyDown = (event, item) => {
     switch (event.key) {
@@ -3360,7 +3396,7 @@ var NavigationMenu = React7.forwardRef(({
           id: `submenu-${item.id}`,
           role: "menu",
           "aria-label": `${item.label} submenu`,
-          children: item.children.map((child) => /* @__PURE__ */ jsx(React7.Fragment, { children: renderHierarchicalItem(child, level + 1) }, child.id))
+          children: item.children.map((child) => /* @__PURE__ */ jsx(React6.Fragment, { children: renderHierarchicalItem(child, level + 1) }, child.id))
         }
       )
     ] }) : /* @__PURE__ */ jsx(
@@ -3422,7 +3458,7 @@ var NavigationMenu = React7.forwardRef(({
       className,
       "aria-label": navigationLabel,
       ...props,
-      children: /* @__PURE__ */ jsx("ul", { role: "menubar", children: filteredItems.map((item) => /* @__PURE__ */ jsx(React7.Fragment, { children: renderHierarchicalItem(item, 0) }, item.id)) })
+      children: /* @__PURE__ */ jsx("ul", { role: "menubar", children: filteredItems.map((item) => /* @__PURE__ */ jsx(React6.Fragment, { children: renderHierarchicalItem(item, 0) }, item.id)) })
     }
   );
 });
@@ -3545,7 +3581,7 @@ var FooterComponent = ({
   ] }) });
 };
 FooterComponent.displayName = "Footer";
-var Footer = React7__default.memo(FooterComponent);
+var Footer = React6__default.memo(FooterComponent);
 Footer.displayName = "Footer";
 var EMPTY_PAGE_ID_MAPPING = {};
 var EMPTY_ROUTE_PERMISSIONS = {};
@@ -4311,7 +4347,7 @@ function ProtectedRoute({
     return /* @__PURE__ */ jsx(Outlet, {});
   }
   if (isLoading && !sessionRestoration.hasTimedOut) {
-    return loadingFallback || /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
+    return loadingFallback || /* @__PURE__ */ jsx("main", { className: "grid place-items-center size-full", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
   }
   if (!isAuthenticated) {
     if (sessionRestoration.hasTimedOut || sessionRestoration.restorationError) {
@@ -4326,13 +4362,13 @@ function ProtectedRoute({
     }
     const isTabVisible = typeof document !== "undefined" && !document.hidden;
     if (tabJustBecameVisibleRef.current || isTabVisible && wasAuthenticatedRef.current && isLoading) {
-      return loadingFallback || /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
+      return loadingFallback || /* @__PURE__ */ jsx("main", { className: "grid place-items-center size-full", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
     }
     if (shouldRedirect) {
       return /* @__PURE__ */ jsx(Navigate, { to: loginPath, replace: true });
     }
     if (isLoading) {
-      return loadingFallback || /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
+      return loadingFallback || /* @__PURE__ */ jsx("main", { className: "grid place-items-center size-full", children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
     }
     return /* @__PURE__ */ jsx(Navigate, { to: loginPath, replace: true });
   }
@@ -4340,7 +4376,7 @@ function ProtectedRoute({
     return /* @__PURE__ */ jsx(Outlet, {});
   }
   if (!events || events.length === 0) {
-    return noEventsFallback || /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", padding: "2rem" }, children: /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "max-w-md", children: [
+    return noEventsFallback || /* @__PURE__ */ jsx("main", { className: "grid place-items-center text-center min-h-screen p-8", children: /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "max-w-md", children: [
       /* @__PURE__ */ jsx(AlertTitle, { children: "No Events Available" }),
       /* @__PURE__ */ jsx(AlertDescription, { children: "You don't have access to any events. Please contact your administrator if you believe this is an error." })
     ] }) });
@@ -4689,9 +4725,9 @@ function FileUpload({
   };
   const dragClasses = isDragging ? "border-main-500 bg-main-50" : "border-sec-300 hover:border-sec-400";
   const disabledClasses = isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-sec-50";
-  return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
+  return /* @__PURE__ */ jsxs(Card, { className, children: [
     /* @__PURE__ */ jsxs(
-      "div",
+      CardHeader,
       {
         role: "button",
         tabIndex: isDisabled ? -1 : 0,
@@ -4709,7 +4745,7 @@ function FileUpload({
           }
         } : void 0,
         children: [
-          children || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          children || /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -4724,64 +4760,58 @@ function FileUpload({
                 "aria-label": accept ? `Upload file${multiple ? "s" : ""} (${accept})` : `Upload file${multiple ? "s" : ""}`
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "text-sec-600", children: isResolvingAppId ? "Resolving app configuration..." : isDragging ? "Drop files here..." : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Click to upload" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sec-600", children: isResolvingAppId ? "Resolving app configuration..." : isDragging ? "Drop files here..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+              "Click to upload",
               " ",
               "or drag and drop"
             ] }) }),
-            /* @__PURE__ */ jsxs("div", { className: "text-sm text-sec-500", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-sec-500", children: [
               !isResolvingAppId && accept !== "*/*" && `Accepted formats: ${accept}`,
               !isResolvingAppId && maxSize && ` \u2022 Max size: ${Math.round(maxSize / 1024 / 1024)}MB`,
               !isResolvingAppId && multiple && " \u2022 Multiple files allowed"
             ] })
           ] }),
-          isUploading && !showProgress && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center",
-              role: "status",
-              "aria-live": "polite",
-              "aria-label": "Uploading file",
-              children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full size-8 border-b-2 border-main-500", "aria-hidden": "true" })
-            }
-          )
+          isUploading && !showProgress && /* @__PURE__ */ jsx(LoadingSpinner, { size: "lg", className: "text-main-500" })
         ]
       }
     ),
-    showProgress && uploadStates.size > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from(uploadStates.entries()).map(([fileId, uploadState]) => {
+    showProgress && uploadStates.size > 0 && /* @__PURE__ */ jsx(CardContent, { children: Array.from(uploadStates.entries()).map(([fileId, uploadState]) => {
       const { file, progress, preview, result } = uploadState;
       const isError = progress.status === "error";
       const isCompleted = progress.status === "completed";
       const isUploading2 = progress.status === "uploading" || progress.status === "processing";
       return /* @__PURE__ */ jsxs(
-        "div",
+        Card,
         {
-          className: `flex items-center space-x-3 p-3 rounded-lg border ${isError ? "bg-acc-50 border-acc-200" : isCompleted ? "bg-success-50 border-success-200" : "bg-sec-50 border-sec-200"}`,
+          className: `grid grid-cols-[auto_1fr_auto] items-center gap-3 ${isError ? "bg-acc-50 border-acc-200" : isCompleted ? "bg-success-50 border-success-200" : "bg-sec-50 border-sec-200"}`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: preview ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(CardHeader, { className: "p-0", children: preview ? /* @__PURE__ */ jsx(
               "img",
               {
                 src: preview,
                 alt: file.name,
-                className: "w-12 h-12 object-cover rounded"
+                className: "size-12 object-cover rounded"
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "w-12 h-12 flex items-center justify-center bg-sec-200 rounded", children: /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u{1F4C4}" }) }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "font-medium text-sec-900 truncate", children: file.name }),
-              /* @__PURE__ */ jsxs("div", { className: "text-sm text-sec-500", children: [
+            ) : /* @__PURE__ */ jsx(File, { className: "size-12 text-sec-600" }) }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "p-0 min-w-0", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-base truncate", children: file.name }),
+              /* @__PURE__ */ jsxs(CardDescription, { children: [
                 formatFileSize(file.size),
                 isCompleted && result && " \u2022 Uploaded",
                 isError && progress.error && ` \u2022 ${progress.error}`
               ] }),
-              showProgress && (isUploading2 || isError) && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "w-full bg-sec-200 rounded-full h-2", children: /* @__PURE__ */ jsx(
-                  "div",
+              showProgress && (isUploading2 || isError) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Progress,
                   {
-                    className: `h-2 rounded-full transition-all duration-300 ${isError ? "bg-acc-500" : "bg-main-500"}`,
-                    style: { width: `${progress.percentage}%` }
+                    value: progress.percentage,
+                    max: 100,
+                    style: {
+                      accentColor: isError ? "var(--color-acc-500)" : "var(--color-main-500)"
+                    }
                   }
-                ) }),
-                isUploading2 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-sec-500 mt-1", children: [
+                ),
+                isUploading2 && /* @__PURE__ */ jsxs("p", { children: [
                   progress.percentage,
                   "% \u2022 ",
                   formatFileSize(progress.loaded),
@@ -4790,118 +4820,22 @@ function FileUpload({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
-              isCompleted && /* @__PURE__ */ jsx("span", { className: "text-success-500 text-xl", children: "\u2713" }),
-              isError && /* @__PURE__ */ jsx("span", { className: "text-acc-500 text-xl", children: "\u2715" }),
-              isUploading2 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "animate-spin rounded-full size-5 border-b-2 border-main-500",
-                  role: "status",
-                  "aria-label": "Uploading",
-                  "aria-hidden": "true"
-                }
-              )
+            /* @__PURE__ */ jsxs(CardFooter, { className: "p-0", children: [
+              isCompleted && /* @__PURE__ */ jsx(Check, { className: "text-success-500 size-5" }),
+              isError && /* @__PURE__ */ jsx(X, { className: "text-acc-500 size-5" }),
+              isUploading2 && /* @__PURE__ */ jsx(LoadingSpinner, { size: "sm", className: "text-main-500" })
             ] })
           ]
         },
         fileId
       );
     }) }),
-    appIdError && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "p-3 bg-acc-50 border border-acc-200 rounded-lg text-sm text-acc-600",
-        role: "alert",
-        "aria-live": "assertive",
-        children: appIdError
-      }
-    ),
-    error && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "p-3 bg-acc-50 border border-acc-200 rounded-lg text-sm text-acc-600",
-        role: "alert",
-        "aria-live": "assertive",
-        children: error
-      }
-    )
+    (appIdError || error) && /* @__PURE__ */ jsxs(CardFooter, { children: [
+      appIdError && /* @__PURE__ */ jsx("p", { className: "grid place-items-center text-center size-full", role: "alert", "aria-live": "assertive", children: appIdError }),
+      error && /* @__PURE__ */ jsx("p", { className: "grid place-items-center text-center size-full", role: "alert", "aria-live": "assertive", children: error })
+    ] })
   ] });
 }
-var Table = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "table",
-  {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
-  }
-));
-Table.displayName = "Table";
-var TableHeader = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
-TableHeader.displayName = "TableHeader";
-var TableBody = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "tbody",
-  {
-    ref,
-    className: cn("[&_tr:last-child]:border-0", className),
-    ...props
-  }
-));
-TableBody.displayName = "TableBody";
-var TableFooter = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "tfoot",
-  {
-    ref,
-    className: cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    ),
-    ...props
-  }
-));
-TableFooter.displayName = "TableFooter";
-var TableRow = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "tr",
-  {
-    ref,
-    className: cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    ),
-    ...props
-  }
-));
-TableRow.displayName = "TableRow";
-var TableHead = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "th",
-  {
-    ref,
-    className: cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    ),
-    ...props
-  }
-));
-TableHead.displayName = "TableHead";
-var TableCell = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "td",
-  {
-    ref,
-    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
-    ...props
-  }
-));
-TableCell.displayName = "TableCell";
-var TableCaption = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "caption",
-  {
-    ref,
-    className: cn("mt-4 text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-TableCaption.displayName = "TableCaption";
 function PublicPageHeader({
   event,
   eventCode,
@@ -5039,4 +4973,4 @@ function PublicPageLayout({
   ] }) });
 }
 
-export { AddressField, Avatar, Badge, Calendar, ContextSelector, FileDisplay, FileUpload, Footer, Form, FormField, Header, Label, LoginForm, NavigationMenu, PaceAppLayout, PaceLoginPage, PasswordChangeForm, ProtectedRoute, PublicPageFooter, PublicPageHeader, PublicPageLayout, SessionRestorationLoader, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, UserMenu, useFileReference, useFileReferenceById, useFileReferenceForRecord, useFilesByCategory };
+export { AddressField, Avatar, Badge, Calendar, ContextSelector, FileDisplay, FileUpload, Footer, Form, FormField, Header, LoginForm, NavigationMenu, PaceAppLayout, PaceLoginPage, PasswordChangeForm, ProtectedRoute, PublicPageFooter, PublicPageHeader, PublicPageLayout, SessionRestorationLoader, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, UserMenu, useFileReference, useFileReferenceById, useFileReferenceForRecord, useFilesByCategory };