@jmruthers/pace-core 0.5.189 → 0.5.191

package/dist/{chunk-YGPFYGA6.js → chunk-VKB2CO4Z.js}

@@ -25,57 +25,57 @@ import {
   SelectSeparator,
   SelectTrigger,
   SelectValue
-} from "./chunk-2UUZZJFT.js";
+} from "./chunk-ULHIJK66.js";
 import {
   useCan,
   usePermissions,
-  useRBAC,
-  useResolvedScope
-} from "./chunk-3GOZZZYH.js";
-import {
-  isSuperAdmin
-} from "./chunk-HEHYGYOX.js";
+  useRBAC
+} from "./chunk-VRGWKHDB.js";
 import {
-  ErrorBoundary,
-  PublicPageContext,
   createFileReferenceService,
   generateFileUrlsBatch,
   getPublicUrl,
   getSignedUrl,
   uploadFileWithReference,
   useAddressAutocomplete,
-  useAppConfig,
   useEventTheme,
   useFileDisplay,
-  useIsPublicPage,
   usePreventTabReload,
   usePublicFileDisplay
-} from "./chunk-UCQSRW7Z.js";
+} from "./chunk-XNYQOL3Z.js";
 import {
   useToast
 } from "./chunk-6C4YBBJM.js";
 import {
+  ErrorBoundary,
+  PublicPageContext,
+  useAppConfig,
   useEvents,
-  useOrganisations
-} from "./chunk-E7UAOUMY.js";
+  useIsPublicPage,
+  useResolvedScope
+} from "./chunk-OETXORNB.js";
 import {
   EventServiceContext,
+  useOrganisations,
   useSessionRestoration,
   useUnifiedAuth
-} from "./chunk-VGZZXKBR.js";
+} from "./chunk-6LTQQAT6.js";
+import {
+  isSuperAdmin
+} from "./chunk-ROXMHMY2.js";
 import {
   assertAppId
 } from "./chunk-QXHPKYJV.js";
 import {
   LoadingSpinner,
   getAppId
-} from "./chunk-THRPYOFK.js";
+} from "./chunk-HW3OVDUF.js";
 import {
   cn
 } from "./chunk-R77UEZ4E.js";
 import {
   getCurrentAppName
-} from "./chunk-F2IMUDXZ.js";
+} from "./chunk-I7PSE6JW.js";
 import {
   clearPalette
 } from "./chunk-SQGMNID3.js";
@@ -229,47 +229,47 @@ var AddressField = React.forwardRef(
         };
       }
     }, [isOpen]);
+    const suggestionsId = React.useId();
     React.useEffect(() => {
-      if (selectedIndex >= 0 && suggestionsRef.current) {
-        const selectedItem = suggestionsRef.current.children[selectedIndex];
+      if (selectedIndex >= 0) {
+        const selectedItem = document.getElementById(
+          `${suggestionsId}-item-${selectedIndex}`
+        );
         if (selectedItem && typeof selectedItem.scrollIntoView === "function") {
           selectedItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
         }
       }
-    }, [selectedIndex]);
+    }, [selectedIndex, suggestionsId]);
     React.useImperativeHandle(ref, () => inputRef.current);
-    const suggestionsId = React.useId();
     const hasError = error || !!autocompleteError;
-    return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative w-full", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            ref: inputRef,
-            type: "text",
-            value,
-            onChange: handleInputChange,
-            onKeyDown: handleKeyDown,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            placeholder,
-            disabled,
-            error: hasError,
-            size,
-            variant,
-            role: "combobox",
-            "aria-expanded": isOpen,
-            "aria-autocomplete": "list",
-            "aria-controls": suggestionsId,
-            "aria-haspopup": "listbox",
-            "aria-activedescendant": selectedIndex >= 0 ? `${suggestionsId}-item-${selectedIndex}` : void 0,
-            ...props
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: "sm" }) })
-      ] }),
+    return /* @__PURE__ */ jsxs("form", { ref: containerRef, className: cn("relative w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: inputRef,
+          type: "text",
+          value,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          placeholder,
+          disabled,
+          error: hasError,
+          size,
+          variant,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-autocomplete": "list",
+          "aria-controls": suggestionsId,
+          "aria-haspopup": "listbox",
+          "aria-activedescendant": selectedIndex >= 0 ? `${suggestionsId}-item-${selectedIndex}` : void 0,
+          ...props
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx("p", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: "sm" }) }),
       isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx(
-        "ul",
+        "dl",
         {
           ref: suggestionsRef,
           id: suggestionsId,
@@ -280,28 +280,28 @@ var AddressField = React.forwardRef(
             "list-none p-0 m-0"
           ),
           "data-testid": "address-suggestions",
-          children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(
-            "li",
-            {
-              id: `${suggestionsId}-item-${index}`,
-              role: "option",
-              "aria-selected": selectedIndex === index,
-              className: cn(
-                "px-3 py-2 cursor-pointer text-sm",
-                "hover:bg-main-100 focus:bg-main-100",
-                "border-b border-main-200 last:border-b-0",
-                selectedIndex === index && "bg-main-100"
-              ),
-              onClick: () => handleSelectAddress(suggestion.place_id),
-              onMouseEnter: () => setSelectedIndex(index),
-              "data-testid": `address-suggestion-${index}`,
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "font-medium text-main-900", children: suggestion.structured_formatting?.main_text || suggestion.description }),
-                suggestion.structured_formatting?.secondary_text && /* @__PURE__ */ jsx("div", { className: "text-xs text-main-600 mt-0.5", children: suggestion.structured_formatting.secondary_text })
-              ]
-            },
-            suggestion.place_id
-          ))
+          children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "dt",
+              {
+                id: `${suggestionsId}-item-${index}`,
+                role: "option",
+                "aria-selected": selectedIndex === index,
+                className: cn(
+                  "px-3 py-2 cursor-pointer text-sm",
+                  "hover:bg-main-100 focus:bg-main-100",
+                  "border-b border-main-200 last:border-b-0",
+                  selectedIndex === index && "bg-main-100",
+                  "font-medium text-main-900"
+                ),
+                onClick: () => handleSelectAddress(suggestion.place_id),
+                onMouseEnter: () => setSelectedIndex(index),
+                "data-testid": `address-suggestion-${index}`,
+                children: suggestion.structured_formatting?.main_text || suggestion.description
+              }
+            ),
+            suggestion.structured_formatting?.secondary_text && /* @__PURE__ */ jsx("dd", { className: "px-3 pb-2 text-xs text-main-600 mt-0.5", children: suggestion.structured_formatting.secondary_text })
+          ] }, suggestion.place_id))
         }
       ),
       autocompleteError && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-destructive", role: "alert", children: autocompleteError.message })
@@ -313,7 +313,7 @@ AddressField.displayName = "AddressField";
 // src/components/Label/Label.tsx
 import * as React2 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var getLabelClasses = () => {
   return "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
 };
@@ -332,7 +332,7 @@ var Label = React2.forwardRef(({
 }, ref) => {
   const hasError = !!error;
   const showHelperText = helperText && !hasError;
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2(
       LabelPrimitive.Root,
       {
@@ -482,15 +482,20 @@ function useFileUrl(fileReference, options) {
 }
 
 // src/components/FileDisplay/FileDisplay.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var fallbackSizeClasses = {
-  xs: "h-4 w-4 text-xs",
-  sm: "h-6 w-6 text-sm",
-  md: "h-8 w-8 text-base",
-  lg: "h-12 w-12 text-lg",
-  xl: "h-16 w-16 text-xl",
-  "2xl": "h-20 w-20 text-2xl"
+  xs: "size-4 text-xs",
+  sm: "size-6 text-sm",
+  md: "size-8 text-base",
+  lg: "size-12 text-lg",
+  xl: "size-16 text-xl",
+  "2xl": "size-20 text-2xl"
 };
+var fallbackBaseClasses = "size-full grid place-items-center text-center text-sec-600 font-semibold";
+function getFallbackClasses(size = "md") {
+  const sizeClass = fallbackSizeClasses[size];
+  return `${fallbackBaseClasses} ${sizeClass}`.trim();
+}
 function defaultGenerateFallbackText(fileName) {
   if (!fileName) return "FL";
   const baseName = fileName.replace(/\.[^/.]+$/, "");
@@ -519,7 +524,10 @@ function FileDisplayContent({
   showFallback = false,
   generateFallbackText = defaultGenerateFallbackText,
   fallbackText,
-  fallbackSize = "md"
+  fallbackSourceText,
+  fallbackSize = "md",
+  enableChildren = false,
+  showMetadata = true
 }) {
   const [imageError, setImageError] = useState3(false);
   const [internalFileUrls, setInternalFileUrls] = useState3(new Map(fileUrls));
@@ -527,14 +535,12 @@ function FileDisplayContent({
   const fileReferencesRef = useRef3([]);
   const computedFallbackText = useMemo(() => {
     if (fallbackText) return fallbackText;
-    const fileName = fileReference?.file_metadata?.fileName;
-    return generateFallbackText(fileName);
-  }, [fallbackText, fileReference, generateFallbackText]);
+    const sourceText = fallbackSourceText ?? fileReference?.file_metadata?.fileName;
+    return generateFallbackText(sourceText);
+  }, [fallbackText, fallbackSourceText, fileReference, generateFallbackText]);
   const fallbackClasses = useMemo(() => {
-    const sizeClass = fallbackSizeClasses[fallbackSize];
-    const baseClasses = "flex items-center justify-center bg-sec-100 text-sec-600 font-semibold rounded";
-    return `${baseClasses} ${sizeClass} ${className}`.trim();
-  }, [fallbackSize, className]);
+    return getFallbackClasses(fallbackSize);
+  }, [fallbackSize]);
   useEffect3(() => {
     const currentIds = fileReferences.map((f) => f.id).join(",");
     const prevIds = fileReferencesRef.current.map((f) => f.id).join(",");
@@ -555,20 +561,8 @@ function FileDisplayContent({
     }
     setImageError(false);
   };
-  const handleImageError = (e) => {
+  const handleImageError = () => {
     setImageError(true);
-    if (showFallback && e) {
-      const target = e.target;
-      target.style.display = "none";
-      if (target.nextSibling && target.nextSibling.className.includes("bg-sec-100")) {
-        return;
-      }
-      const fallback = document.createElement("div");
-      fallback.className = fallbackClasses;
-      fallback.textContent = computedFallbackText;
-      fallback.title = fileReference?.file_metadata?.fileName || "File";
-      target.parentNode?.insertBefore(fallback, target.nextSibling);
-    }
   };
   const getFileIcon = (fileType) => {
     if (fileType.startsWith("image/")) return "\u{1F5BC}\uFE0F";
@@ -592,18 +586,18 @@ function FileDisplayContent({
       return /* @__PURE__ */ jsx4(ErrorComponent, { error, retry: clearError });
     }
     if (showFallback) {
-      return /* @__PURE__ */ jsx4("div", { className: fallbackClasses, title: "File unavailable", children: computedFallbackText });
+      return /* @__PURE__ */ jsx4("figure", { className, title: "File unavailable", children: /* @__PURE__ */ jsx4("p", { className: fallbackClasses, children: computedFallbackText }) });
     }
-    return /* @__PURE__ */ jsxs3("div", { className: `p-4 bg-acc-50 border border-acc-200 rounded-lg ${className}`, children: [
-      /* @__PURE__ */ jsxs3("div", { className: "text-acc-600", children: [
+    return /* @__PURE__ */ jsxs3("figure", { className, title: "Error", children: [
+      /* @__PURE__ */ jsxs3("p", { className: getFallbackClasses(fallbackSize || "md"), children: [
         "Error loading file: ",
         error instanceof Error ? error.message : String(error)
       ] }),
       clearError && /* @__PURE__ */ jsx4(
-        "button",
+        Button,
         {
           onClick: clearError,
-          className: "mt-2 text-sm text-acc-700 hover:text-acc-800 underline",
+          className: "mt-2",
           "aria-label": "Retry loading file",
           children: "Try again"
         }
@@ -612,19 +606,19 @@ function FileDisplayContent({
   }
   if (fileCount === 0 && !isLoading) {
     if (showFallback) {
-      return /* @__PURE__ */ jsxs3("div", { className: fallbackClasses, title: "No file", children: [
-        computedFallbackText,
+      return /* @__PURE__ */ jsxs3("figure", { className, title: "No file", children: [
+        /* @__PURE__ */ jsx4("p", { className: fallbackClasses, children: computedFallbackText }),
         children
       ] });
     }
-    return /* @__PURE__ */ jsxs3("div", { className: `text-sec-500 text-center p-4 ${className}`, children: [
-      "No files found",
+    return /* @__PURE__ */ jsxs3("figure", { className: `text-sec-500 text-center p-4 ${className}`, children: [
+      /* @__PURE__ */ jsx4("p", { children: "No files found" }),
       children
     ] });
   }
   if (isLoading && showFallback && fileCount === 0) {
-    return /* @__PURE__ */ jsxs3("div", { className: fallbackClasses, title: "Loading...", children: [
-      computedFallbackText,
+    return /* @__PURE__ */ jsxs3("figure", { className, title: "Loading...", children: [
+      /* @__PURE__ */ jsx4("p", { className: fallbackClasses, children: computedFallbackText }),
       children
     ] });
   }
@@ -632,98 +626,125 @@ function FileDisplayContent({
     if (LoadingComponent) {
       return /* @__PURE__ */ jsx4(LoadingComponent, {});
     }
-    return /* @__PURE__ */ jsx4("div", { className: `flex items-center justify-center p-4 ${className}`, children: /* @__PURE__ */ jsx4("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-main-500" }) });
+    return /* @__PURE__ */ jsx4("figure", { className, title: "Loading", children: /* @__PURE__ */ jsx4("p", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsx4(LoadingSpinner, {}) }) });
   }
   if ((category || displayOnly) && fileReference) {
     const isImage = fileReference.file_metadata.fileType?.startsWith("image/");
-    if (displayOnly && isImage && !showDelete) {
+    if (displayOnly && isImage && !showDelete && !enableChildren) {
       if (imageError && showFallback) {
-        return /* @__PURE__ */ jsx4("div", { className: fallbackClasses, title: fileReference.file_metadata.fileName || "File", children: computedFallbackText });
+        return /* @__PURE__ */ jsx4("figure", { className, title: fileReference.file_metadata.fileName || "File", children: /* @__PURE__ */ jsx4("p", { className: fallbackClasses, children: computedFallbackText }) });
       }
       if (!fileUrl) {
-        return /* @__PURE__ */ jsx4("div", { className: `bg-sec-100 rounded animate-pulse ${className || "max-w-full h-48"}`, children: /* @__PURE__ */ jsx4("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx4("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-main-500" }) }) });
+        return /* @__PURE__ */ jsx4("figure", { className: className || "max-w-full h-48", title: "Loading", children: /* @__PURE__ */ jsx4("p", { className: fallbackClasses, children: /* @__PURE__ */ jsx4(LoadingSpinner, {}) }) });
       }
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx4("figure", { className: className || "max-w-full h-auto", children: /* @__PURE__ */ jsx4(
         "img",
         {
           src: fileUrl,
           alt: fileReference.file_metadata.fileName || "File",
-          className: className || "max-w-full h-auto",
+          className: "max-w-full h-auto",
           onError: handleImageError
         }
-      );
+      ) });
     }
     if (displayOnly && !isImage && fileUrl && fileReference && !showDelete) {
       const fileName = fileReference.file_metadata?.fileName || "Document";
       const ariaLabel = `Open ${fileName} in new tab`;
-      return /* @__PURE__ */ jsxs3(
-        "a",
-        {
-          href: fileUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          "aria-label": ariaLabel,
-          className: `flex items-center gap-2 p-3 bg-sec-50 border border-sec-200 rounded-lg hover:bg-sec-100 transition-colors text-main-600 hover:text-main-700 focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2 ${className || ""}`.trim(),
-          children: [
-            /* @__PURE__ */ jsx4(FileText, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx4("span", { className: "flex-1 font-medium truncate", children: fileName }),
-            /* @__PURE__ */ jsx4(ExternalLink, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" })
-          ]
-        }
-      );
+      return /* @__PURE__ */ jsxs3("figure", { className, children: [
+        /* @__PURE__ */ jsxs3(
+          "a",
+          {
+            href: fileUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "aria-label": ariaLabel,
+            className: "flex items-center gap-2 p-3 bg-sec-50 border border-sec-200 rounded-lg hover:bg-sec-100 transition-colors text-main-600 hover:text-main-700 focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2",
+            children: [
+              /* @__PURE__ */ jsx4(FileText, { className: "size-5 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx4("span", { className: "flex-1 font-medium truncate", children: fileName }),
+              /* @__PURE__ */ jsx4(ExternalLink, { className: "size-5 shrink-0", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        showMetadata && /* @__PURE__ */ jsxs3("figcaption", { children: [
+          /* @__PURE__ */ jsx4("p", { children: fileName }),
+          fileReference.file_metadata.fileSize && /* @__PURE__ */ jsxs3("p", { children: [
+            formatFileSize(fileReference.file_metadata.fileSize),
+            " \u2022 ",
+            fileReference.file_metadata.fileType
+          ] })
+        ] })
+      ] });
     }
     if (displayOnly && showFallback && (!fileUrl || imageError || !isImage)) {
-      return /* @__PURE__ */ jsx4("div", { className: fallbackClasses, title: fileReference.file_metadata.fileName || "File", children: computedFallbackText });
+      return /* @__PURE__ */ jsx4("figure", { className, title: fileReference.file_metadata.fileName || "File", children: /* @__PURE__ */ jsx4("p", { className: fallbackClasses, children: computedFallbackText }) });
     }
-    return /* @__PURE__ */ jsxs3("div", { className: `space-y-2 ${className}`, children: [
-      isImage && fileUrl && !imageError ? /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+    return /* @__PURE__ */ jsx4("figure", { className: `relative ${className}`, children: isImage && fileUrl && !imageError ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(
+        "img",
+        {
+          src: fileUrl,
+          alt: fileReference.file_metadata.fileName || "File",
+          className: "max-w-full h-auto",
+          onError: handleImageError
+        }
+      ),
+      showDelete && /* @__PURE__ */ jsxs3(Fragment3, { children: [
         /* @__PURE__ */ jsx4(
-          "img",
+          Button,
           {
-            src: fileUrl,
-            alt: fileReference.file_metadata.fileName || "File",
-            className: "max-w-full h-auto",
-            onError: handleImageError
+            variant: "destructive",
+            size: "icon",
+            onClick: handleDeleteClick,
+            className: "absolute top-2 right-2",
+            title: "Delete file",
+            "aria-label": "Delete file",
+            children: "\xD7"
           }
         ),
-        showDelete && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-          /* @__PURE__ */ jsx4(
-            "button",
-            {
-              onClick: handleDeleteClick,
-              className: "absolute top-2 right-2 bg-acc-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-acc-600",
-              title: "Delete file",
-              "aria-label": "Delete file",
-              children: "\xD7"
-            }
-          ),
-          /* @__PURE__ */ jsx4(Dialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs3(DialogContent, { size: "sm", children: [
-            /* @__PURE__ */ jsx4(DialogHeader, { children: /* @__PURE__ */ jsx4(DialogTitle, { children: "Confirm Delete" }) }),
-            /* @__PURE__ */ jsx4(DialogBody, { children: /* @__PURE__ */ jsx4("p", { children: "Are you sure you want to delete this file? This action cannot be undone." }) }),
-            /* @__PURE__ */ jsxs3(DialogFooter, { children: [
-              /* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: () => setDeleteDialogOpen(false), children: "Cancel" }),
-              /* @__PURE__ */ jsx4(Button, { variant: "destructive", onClick: handleDeleteConfirm, children: "Delete" })
-            ] })
-          ] }) })
+        /* @__PURE__ */ jsx4(Dialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs3(DialogContent, { size: "sm", children: [
+          /* @__PURE__ */ jsx4(DialogHeader, { children: /* @__PURE__ */ jsx4(DialogTitle, { children: "Confirm Delete" }) }),
+          /* @__PURE__ */ jsx4(DialogBody, { children: /* @__PURE__ */ jsx4("p", { children: "Are you sure you want to delete this file? This action cannot be undone." }) }),
+          /* @__PURE__ */ jsxs3(DialogFooter, { children: [
+            /* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: () => setDeleteDialogOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx4(Button, { variant: "destructive", onClick: handleDeleteConfirm, children: "Delete" })
+          ] })
+        ] }) })
+      ] }),
+      children,
+      showMetadata && /* @__PURE__ */ jsxs3("figcaption", { children: [
+        /* @__PURE__ */ jsx4("p", { children: fileReference.file_metadata.fileName || "Unknown file" }),
+        (fileReference.file_metadata.fileSize || fileReference.file_metadata.fileType) && /* @__PURE__ */ jsxs3("p", { children: [
+          fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize),
+          fileReference.file_metadata.fileSize && fileReference.file_metadata.fileType && " \u2022 ",
+          fileReference.file_metadata.fileType
         ] })
-      ] }) : isImage && imageError && showFallback ? (
-        // Show fallback when image fails to load and fallback is enabled
-        /* @__PURE__ */ jsx4("div", { className: fallbackClasses, title: fileReference.file_metadata.fileName || "File", children: computedFallbackText })
-      ) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-2xl", children: getFileIcon(fileReference.file_metadata.fileType || "") }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx4("div", { className: "font-medium text-sec-900 truncate", children: fileReference.file_metadata.fileName || "Unknown file" }),
-          /* @__PURE__ */ jsxs3("div", { className: "text-sm text-sec-500", children: [
+      ] })
+    ] }) : isImage && imageError && showFallback ? (
+      // Show fallback when image fails to load and fallback is enabled
+      /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx4("p", { className: fallbackClasses, title: fileReference.file_metadata.fileName || "File", children: computedFallbackText }),
+        children,
+        showMetadata && /* @__PURE__ */ jsxs3("figcaption", { children: [
+          /* @__PURE__ */ jsx4("p", { children: fileReference.file_metadata.fileName || "Unknown file" }),
+          (fileReference.file_metadata.fileSize || fileReference.file_metadata.fileType) && /* @__PURE__ */ jsxs3("p", { children: [
             fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize),
-            fileReference.file_metadata.fileType && ` \u2022 ${fileReference.file_metadata.fileType}`
+            fileReference.file_metadata.fileSize && fileReference.file_metadata.fileType && " \u2022 ",
+            fileReference.file_metadata.fileType
           ] })
-        ] }),
-        showDelete && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        ] })
+      ] })
+    ) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsxs3("p", { className: "flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-2xl", children: getFileIcon(fileReference.file_metadata.fileType || "") }),
+        showDelete && /* @__PURE__ */ jsxs3(Fragment3, { children: [
           /* @__PURE__ */ jsx4(
-            "button",
+            Button,
             {
+              variant: "destructive",
+              size: "icon",
               onClick: handleDeleteClick,
-              className: "text-acc-500 hover:text-acc-700 p-1",
+              className: "ml-auto",
               title: "Delete file",
               "aria-label": "Delete file",
               children: "\xD7"
@@ -739,15 +760,23 @@ function FileDisplayContent({
           ] }) })
         ] })
       ] }),
-      children
-    ] });
+      children,
+      showMetadata && /* @__PURE__ */ jsxs3("figcaption", { children: [
+        /* @__PURE__ */ jsx4("p", { children: fileReference.file_metadata.fileName || "Unknown file" }),
+        (fileReference.file_metadata.fileSize || fileReference.file_metadata.fileType) && /* @__PURE__ */ jsxs3("p", { children: [
+          fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize),
+          fileReference.file_metadata.fileSize && fileReference.file_metadata.fileType && " \u2022 ",
+          fileReference.file_metadata.fileType
+        ] })
+      ] })
+    ] }) });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: `space-y-2 ${className}`, children: [
+  return /* @__PURE__ */ jsxs3("figure", { className: `space-y-2 ${className}`, children: [
     fileReferences.map((fileRef) => {
       const isImage = fileRef.file_metadata.fileType?.startsWith("image/");
       const fileUrl2 = internalFileUrls.get(fileRef.id) || null;
       const canDownload = !isImage && fileUrl2;
-      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200", children: [
+      return /* @__PURE__ */ jsxs3("figure", { className: "flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200", children: [
         isImage && fileUrl2 ? /* @__PURE__ */ jsx4(
           "img",
           {
@@ -757,15 +786,17 @@ function FileDisplayContent({
             onError: handleImageError
           }
         ) : /* @__PURE__ */ jsx4("span", { className: "text-2xl", children: getFileIcon(fileRef.file_metadata.fileType || "") }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx4("div", { className: "font-medium text-sec-900 truncate", children: fileRef.file_metadata.fileName || "Unknown file" }),
-          /* @__PURE__ */ jsxs3("div", { className: "text-sm text-sec-500", children: [
+        showMetadata && /* @__PURE__ */ jsxs3("figcaption", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx4("p", { className: "font-medium text-sec-900 truncate", children: fileRef.file_metadata.fileName || "Unknown file" }),
+          (fileRef.file_metadata.fileSize || fileRef.file_metadata.fileType || fileRef.file_metadata.category) && /* @__PURE__ */ jsxs3("p", { className: "text-sm text-sec-500", children: [
             fileRef.file_metadata.fileSize && formatFileSize(fileRef.file_metadata.fileSize),
-            fileRef.file_metadata.fileType && ` \u2022 ${fileRef.file_metadata.fileType}`,
-            fileRef.file_metadata.category && ` \u2022 ${fileRef.file_metadata.category}`
+            fileRef.file_metadata.fileSize && fileRef.file_metadata.fileType && " \u2022 ",
+            fileRef.file_metadata.fileType,
+            (fileRef.file_metadata.fileSize || fileRef.file_metadata.fileType) && fileRef.file_metadata.category && " \u2022 ",
+            fileRef.file_metadata.category
           ] })
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxs3("p", { className: "flex items-center space-x-2", children: [
           canDownload && /* @__PURE__ */ jsx4(
             "a",
             {
@@ -777,10 +808,11 @@ function FileDisplayContent({
             }
           ),
           showDelete && onDelete && /* @__PURE__ */ jsx4(
-            "button",
+            Button,
             {
+              variant: "destructive",
+              size: "icon",
               onClick: handleDeleteClick,
-              className: "text-acc-500 hover:text-acc-700 p-1",
               title: "Delete file",
               "aria-label": "Delete file",
               children: "\xD7"
@@ -806,7 +838,10 @@ function FileDisplayPublic({
   showFallback,
   generateFallbackText,
   fallbackText,
-  fallbackSize
+  fallbackSourceText,
+  fallbackSize,
+  enableChildren,
+  showMetadata
 }) {
   const publicPageContext = useContext(PublicPageContext);
   const supabase = publicPageContext?.supabase ?? null;
@@ -834,11 +869,14 @@ function FileDisplayPublic({
           showFallback,
           generateFallbackText,
           fallbackText,
-          fallbackSize
+          fallbackSourceText,
+          fallbackSize,
+          enableChildren,
+          showMetadata
         }
       );
     }
-    return /* @__PURE__ */ jsx4("div", { className: `text-sec-500 text-center p-4 ${className}`, children: "Supabase client not available in public context" });
+    return /* @__PURE__ */ jsx4("figure", { className, title: "Error", children: /* @__PURE__ */ jsx4("p", { className: getFallbackClasses(fallbackSize || "md"), children: "Supabase client not available in public context" }) });
   }
   const {
     fileUrl,
@@ -904,7 +942,10 @@ function FileDisplayPublic({
       showFallback,
       generateFallbackText,
       fallbackText,
-      fallbackSize
+      fallbackSourceText,
+      fallbackSize,
+      enableChildren,
+      showMetadata
     }
   );
 }
@@ -922,11 +963,14 @@ function FileDisplayAuthenticated({
   showFallback,
   generateFallbackText,
   fallbackText,
-  fallbackSize
+  fallbackSourceText,
+  fallbackSize,
+  enableChildren,
+  showMetadata
 }) {
   const { supabase } = useUnifiedAuth();
   if (!supabase) {
-    return /* @__PURE__ */ jsx4("div", { className: `text-sec-500 text-center p-4 ${className}`, children: "Supabase client not available in authenticated context" });
+    return /* @__PURE__ */ jsx4("figure", { className, title: "Error", children: /* @__PURE__ */ jsx4("p", { className: getFallbackClasses(fallbackSize || "md"), children: "Supabase client not available in authenticated context" }) });
   }
   const {
     fileUrl,
@@ -1007,7 +1051,10 @@ function FileDisplayAuthenticated({
       showFallback,
       generateFallbackText,
       fallbackText,
-      fallbackSize
+      fallbackSourceText,
+      fallbackSize,
+      enableChildren,
+      showMetadata
     }
   );
 }
@@ -1025,7 +1072,10 @@ function FileDisplay({
   showFallback,
   generateFallbackText,
   fallbackText,
-  fallbackSize
+  fallbackSourceText,
+  fallbackSize,
+  enableChildren,
+  showMetadata
 }) {
   const isPublicPage = useIsPublicPage();
   if (isPublicPage) {
@@ -1045,7 +1095,10 @@ function FileDisplay({
         showFallback,
         generateFallbackText,
         fallbackText,
-        fallbackSize
+        fallbackSourceText,
+        fallbackSize,
+        enableChildren,
+        showMetadata
       }
     );
   }
@@ -1065,7 +1118,10 @@ function FileDisplay({
       showFallback,
       generateFallbackText,
       fallbackText,
-      fallbackSize
+      fallbackSourceText,
+      fallbackSize,
+      enableChildren,
+      showMetadata
     }
   );
 }
@@ -1073,6 +1129,36 @@ function FileDisplay({
 // src/hooks/useFileReference.ts
 import { useState as useState4, useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useMemo as useMemo2 } from "react";
 var log2 = createLogger("useFileReference");
+var urlRefreshManager = {
+  subscriptions: /* @__PURE__ */ new Map(),
+  subscribe(key, callback) {
+    let entry = this.subscriptions.get(key);
+    if (!entry) {
+      entry = { callbacks: /* @__PURE__ */ new Set(), intervalId: null };
+      this.subscriptions.set(key, entry);
+    }
+    entry.callbacks.add(callback);
+    if (!entry.intervalId) {
+      entry.intervalId = setInterval(() => {
+        entry?.callbacks.forEach((cb) => cb());
+      }, 55 * 60 * 1e3);
+    }
+    return () => {
+      this.unsubscribe(key, callback);
+    };
+  },
+  unsubscribe(key, callback) {
+    const entry = this.subscriptions.get(key);
+    if (!entry) return;
+    entry.callbacks.delete(callback);
+    if (entry.callbacks.size === 0) {
+      if (entry.intervalId) {
+        clearInterval(entry.intervalId);
+      }
+      this.subscriptions.delete(key);
+    }
+  }
+};
 function useFileReference(supabase) {
   const [isLoading, setIsLoading] = useState4(false);
   const [error, setError] = useState4(null);
@@ -1243,7 +1329,7 @@ function useFileReferenceForRecord(supabase, table_name, record_id, organisation
   const [fileReference, setFileReference] = useState4(null);
   const [fileReferences, setFileReferences] = useState4([]);
   const [fileCount, setFileCount] = useState4(0);
-  const urlRefreshIntervalRef = useRef4(null);
+  const refreshSubscriptionRef = useRef4(null);
   const loadFileReference = useCallback4(async () => {
     const reference = await getFileReference(table_name, record_id, organisation_id);
     setFileReference(reference);
@@ -1274,23 +1360,24 @@ function useFileReferenceForRecord(supabase, table_name, record_id, organisation
     return success;
   }, [deleteFileReference, table_name, record_id, organisation_id, loadFileCount]);
   useEffect4(() => {
+    if (refreshSubscriptionRef.current) {
+      refreshSubscriptionRef.current();
+      refreshSubscriptionRef.current = null;
+    }
     if (!fileReference || fileReference.is_public) {
-      if (urlRefreshIntervalRef.current) {
-        clearInterval(urlRefreshIntervalRef.current);
-        urlRefreshIntervalRef.current = null;
-      }
       return;
     }
-    urlRefreshIntervalRef.current = setInterval(() => {
+    const key = `${fileReference.table_name}:${fileReference.record_id}:${organisation_id}`;
+    refreshSubscriptionRef.current = urlRefreshManager.subscribe(key, () => {
       loadFileUrl();
-    }, 55 * 60 * 1e3);
+    });
     return () => {
-      if (urlRefreshIntervalRef.current) {
-        clearInterval(urlRefreshIntervalRef.current);
-        urlRefreshIntervalRef.current = null;
+      if (refreshSubscriptionRef.current) {
+        refreshSubscriptionRef.current();
+        refreshSubscriptionRef.current = null;
       }
     };
-  }, [fileReference, loadFileUrl]);
+  }, [fileReference, loadFileUrl, organisation_id]);
   return {
     isLoading,
     error,
@@ -1396,12 +1483,12 @@ function useFilesByCategory(supabase, table_name, record_id, category, organisat
 import * as React5 from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var sizeClasses = {
-  xs: "h-4 w-4 text-xs",
-  sm: "h-6 w-6 text-sm",
-  md: "h-10 w-10 text-base",
-  lg: "h-12 w-12 text-lg",
-  xl: "h-16 w-16 text-xl",
-  "2xl": "h-20 w-20 text-2xl"
+  xs: "size-4 text-xs",
+  sm: "size-6 text-sm",
+  md: "size-10 text-base",
+  lg: "size-12 text-lg",
+  xl: "size-16 text-xl",
+  "2xl": "size-20 text-2xl"
 };
 var Avatar = React5.forwardRef(
   ({
@@ -1430,9 +1517,9 @@ var Avatar = React5.forwardRef(
     const hasFileId = canFetchFileId && fileIdUrl && !fileIdLoading;
     const hasDirectUrl = src && !imageError;
     const showFallback = !hasDirectUrl && (!hasFileProps && !hasFileId) || imageError || canFetchFileId && !fileIdUrl && !fileIdLoading;
-    const baseClasses = size === "md" ? "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full" : `relative flex ${sizeClasses[size]} shrink-0 overflow-hidden rounded-full`;
-    const fallbackClasses = "flex h-full w-full items-center justify-center rounded-full text-sec-50 bg-sec-500";
-    const imageClasses = "object-cover h-full w-full";
+    const baseClasses = size === "md" ? " size-10 overflow-hidden rounded-full" : ` ${sizeClasses[size]} overflow-hidden rounded-full`;
+    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 = React5.useCallback(() => {
       setImageError(true);
@@ -1443,12 +1530,12 @@ var Avatar = React5.forwardRef(
       }
     }, [src]);
     return /* @__PURE__ */ jsx5(
-      "div",
+      "figure",
       {
         ref,
         className: containerClasses,
         ...props,
-        children: showFallback ? /* @__PURE__ */ jsx5("div", { className: fallbackClasses, "aria-label": alt || fallback, children: fallback }) : hasFileProps ? (
+        children: showFallback ? /* @__PURE__ */ jsx5("figcaption", { className: fallbackClasses, "aria-label": alt || fallback, children: fallback }) : hasFileProps ? (
           // File reference props approach - use FileDisplay
           /* @__PURE__ */ jsx5(
             FileDisplay,
@@ -1487,7 +1574,7 @@ var Avatar = React5.forwardRef(
           )
         ) : (
           // Fallback if nothing else works
-          /* @__PURE__ */ jsx5("div", { className: fallbackClasses, "aria-label": alt || fallback, children: fallback })
+          /* @__PURE__ */ jsx5("figcaption", { className: fallbackClasses, "aria-label": alt || fallback, children: fallback })
         )
       }
     );
@@ -1624,7 +1711,7 @@ var Switch = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
       {
         className: cn(
           // Base styles
-          "pointer-events-none block h-5 w-5 rounded-full",
+          "pointer-events-none block size-5 rounded-full",
           // Background and shadow
           "bg-background shadow-lg ring-0",
           // Transition
@@ -1691,86 +1778,298 @@ TabsContent.displayName = TabsPrimitive.Content.displayName || "TabsContent";
 
 // src/components/Calendar/Calendar.tsx
 import * as React9 from "react";
-import { DayPicker } from "react-day-picker";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import {
+  DayPicker,
+  useDayPicker
+} from "react-day-picker";
+import { enAU } from "date-fns/locale";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var assignToRef = (ref, value) => {
+  if (!ref) {
+    return;
+  }
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+};
 var Calendar = React9.forwardRef(
-  ({ className, classNames, mode, components, ...props }, ref) => {
-    const defaultComponents = {
-      IconLeft: ({ ...iconProps }) => /* @__PURE__ */ jsx9(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: "h-4 w-4",
-          ...iconProps,
-          children: /* @__PURE__ */ jsx9("path", { d: "m15 18-6-6 6-6" })
+  ({ className, classNames, mode, components, locale, month: controlledMonth, onMonthChange: controlledOnMonthChange, onSelect, ...props }, ref) => {
+    const tableRef = React9.useRef(null);
+    const setForwardedRef = React9.useCallback(
+      (node) => {
+        tableRef.current = node;
+        if (!ref) {
+          return;
         }
-      ),
-      IconRight: ({ ...iconProps }) => /* @__PURE__ */ jsx9(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: "h-4 w-4",
-          ...iconProps,
-          children: /* @__PURE__ */ jsx9("path", { d: "m9 18 6-6-6-6" })
+        if (typeof ref === "function") {
+          ref(node);
+        } else {
+          ref.current = node;
         }
-      ),
-      ...components
-    };
-    return /* @__PURE__ */ jsx9("div", { ref, className: cn("p-3", className), children: /* @__PURE__ */ jsx9(
+      },
+      [ref]
+    );
+    const rootPropsRef = React9.useRef(null);
+    const selected = props.selected;
+    const isMonthControlled = controlledMonth !== void 0;
+    const [internalMonth, setInternalMonth] = React9.useState(() => {
+      const now = /* @__PURE__ */ new Date();
+      return new Date(now.getFullYear(), now.getMonth(), 1);
+    });
+    const month = React9.useMemo(() => {
+      const monthToUse = isMonthControlled ? controlledMonth : internalMonth;
+      if (!monthToUse) {
+        const now = /* @__PURE__ */ new Date();
+        return new Date(now.getFullYear(), now.getMonth(), 1);
+      }
+      const normalized = new Date(monthToUse.getFullYear(), monthToUse.getMonth(), 1);
+      return normalized;
+    }, [isMonthControlled, controlledMonth, internalMonth]);
+    const handleMonthChange = React9.useCallback((newMonth) => {
+      if (!isMonthControlled) {
+        setInternalMonth(newMonth);
+      }
+      controlledOnMonthChange?.(newMonth);
+    }, [isMonthControlled, controlledOnMonthChange]);
+    const wrappedHandleMonthChange = React9.useCallback((newMonth) => {
+      handleMonthChange(newMonth);
+    }, [handleMonthChange]);
+    const CustomRoot = React9.memo(({ children, rootRef: dayPickerRootRef, ...rootProps }) => {
+      const {
+        className: rootClassName,
+        style: rootStyle,
+        children: _ignoredChildren,
+        ...restProps
+      } = rootProps;
+      rootPropsRef.current = {
+        className: rootClassName,
+        style: rootStyle,
+        rootRef: dayPickerRootRef,
+        restProps
+      };
+      return /* @__PURE__ */ jsx9(Fragment4, { children });
+    });
+    CustomRoot.displayName = "CustomRoot";
+    const CustomMonths = React9.memo(({ children }) => {
+      return /* @__PURE__ */ jsx9(Fragment4, { children });
+    });
+    CustomMonths.displayName = "CustomMonths";
+    const CustomMonthGrid = React9.forwardRef((props2, forwardedRef) => {
+      return /* @__PURE__ */ jsx9("table", { ref: forwardedRef, ...props2 });
+    });
+    CustomMonthGrid.displayName = "CustomMonthGrid";
+    const CustomMonth = React9.memo(({ calendarMonth, displayIndex, className: className2, children }) => {
+      const { formatters, components: components2, labels, classNames: classNames2, previousMonth, nextMonth, goToMonth } = useDayPicker();
+      const caption = formatters.formatCaption(calendarMonth.date, {});
+      const Chevron = components2?.Chevron;
+      const childrenArray = React9.Children.toArray(children);
+      const monthGridIndex = childrenArray.findIndex((child) => {
+        if (!React9.isValidElement(child)) return false;
+        const childType = child.type;
+        return typeof childType === "function" && childType.displayName === "MonthGrid" || child.type === "table";
+      });
+      return /* @__PURE__ */ jsx9(Fragment4, { children: childrenArray.map((child, index) => {
+        if (React9.isValidElement(child) && child.type?.displayName === "MonthCaption") {
+          return null;
+        }
+        if (index === monthGridIndex && React9.isValidElement(child)) {
+          const monthGridChild = child;
+          const applyRootProps = displayIndex === 0 && index === monthGridIndex;
+          const storedRootProps = applyRootProps ? rootPropsRef.current : null;
+          const { children: monthGridChildren, className: monthGridClassName, style: monthGridStyle, ...monthGridRest } = monthGridChild.props;
+          const mergedClassName = cn(
+            "w-full border-collapse rounded-md border border-sec-200 bg-background",
+            applyRootProps ? storedRootProps?.className : void 0,
+            className2,
+            monthGridClassName
+          );
+          const mergedStyle = {
+            ...applyRootProps ? storedRootProps?.style ?? {} : {},
+            ...monthGridStyle ?? {}
+          };
+          const tableProps = {
+            ...applyRootProps && storedRootProps?.restProps ? storedRootProps.restProps : {},
+            ...monthGridRest,
+            className: mergedClassName,
+            ...Object.keys(mergedStyle).length ? { style: mergedStyle } : {}
+          };
+          if (mode && tableProps["data-mode"] === void 0) {
+            tableProps["data-mode"] = mode;
+          }
+          const shouldAttachRef = applyRootProps || storedRootProps?.rootRef;
+          const handleTableRef = shouldAttachRef ? (node) => {
+            if (applyRootProps) {
+              setForwardedRef(node);
+            }
+            if (storedRootProps?.rootRef) {
+              assignToRef(storedRootProps.rootRef, node);
+            }
+          } : void 0;
+          const handlePreviousClick = (event) => {
+            event.preventDefault();
+            if (!previousMonth) return;
+            goToMonth(previousMonth);
+          };
+          const handleNextClick = (event) => {
+            event.preventDefault();
+            if (!nextMonth) return;
+            goToMonth(nextMonth);
+          };
+          const monthGridElement = monthGridChild;
+          const mergedRef = handleTableRef || monthGridElement.ref ? (node) => {
+            if (handleTableRef) {
+              handleTableRef(node);
+            }
+            assignToRef(monthGridElement.ref, node);
+          } : void 0;
+          return React9.cloneElement(
+            monthGridElement,
+            {
+              key: child.key ?? `month-grid-${displayIndex}`,
+              ...tableProps,
+              ...mergedRef ? { ref: mergedRef } : {}
+            },
+            /* @__PURE__ */ jsxs4(Fragment4, { children: [
+              /* @__PURE__ */ jsx9("caption", { className: "relative", children: /* @__PURE__ */ jsxs4("nav", { className: "relative flex items-center justify-center gap-1", children: [
+                /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "h-7 w-7 bg-transparent p-0",
+                      "inline-flex items-center justify-center rounded-md",
+                      "hover:bg-acc-100",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2",
+                      "disabled:opacity-50 disabled:pointer-events-none",
+                      classNames2?.button_previous
+                    ),
+                    tabIndex: previousMonth ? void 0 : -1,
+                    "aria-disabled": previousMonth ? void 0 : true,
+                    "aria-label": previousMonth ? labels.labelPrevious(previousMonth) : void 0,
+                    onClick: handlePreviousClick,
+                    disabled: !previousMonth,
+                    children: Chevron ? /* @__PURE__ */ jsx9(Chevron, { orientation: "left", className: "size-4", disabled: !previousMonth }) : /* @__PURE__ */ jsx9("span", { children: "\u2039" })
+                  }
+                ),
+                /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium", children: caption }),
+                /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "h-7 w-7 bg-transparent p-0",
+                      "inline-flex items-center justify-center rounded-md",
+                      "hover:bg-acc-100",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2",
+                      "disabled:opacity-50 disabled:pointer-events-none",
+                      classNames2?.button_next
+                    ),
+                    tabIndex: nextMonth ? void 0 : -1,
+                    "aria-disabled": nextMonth ? void 0 : true,
+                    "aria-label": nextMonth ? labels.labelNext(nextMonth) : void 0,
+                    onClick: handleNextClick,
+                    disabled: !nextMonth,
+                    children: Chevron ? /* @__PURE__ */ jsx9(Chevron, { orientation: "right", className: "size-4", disabled: !nextMonth }) : /* @__PURE__ */ jsx9("span", { children: "\u203A" })
+                  }
+                )
+              ] }) }),
+              monthGridChildren
+            ] })
+          );
+        }
+        return child;
+      }) });
+    });
+    CustomMonth.displayName = "CustomMonth";
+    const CustomWeekdays = React9.memo(({ className: className2, children, ...props2 }) => {
+      return /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { className: cn("text-xs text-sec-500", className2), ...props2, children }) });
+    });
+    CustomWeekdays.displayName = "CustomWeekdays";
+    const defaultComponents = React9.useMemo(() => ({
+      Root: CustomRoot,
+      Months: CustomMonths,
+      Month: CustomMonth,
+      MonthGrid: CustomMonthGrid,
+      // MonthCaption is now handled inside CustomMonth (injected into table)
+      Weekdays: CustomWeekdays,
+      // Spread user components AFTER ours so ours take precedence
+      ...components || {}
+    }), [components, CustomRoot, CustomMonths, CustomMonth, CustomWeekdays]);
+    return /* @__PURE__ */ jsx9(
       DayPicker,
       {
         ...mode ? { mode } : {},
+        locale: locale ?? enAU,
+        hideNavigation: true,
         ...props,
-        className: "rounded-md border border-sec-200 bg-background",
+        selected,
+        onSelect,
+        month,
+        onMonthChange: wrappedHandleMonthChange,
+        className,
         classNames: {
-          months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-          month: "space-y-4",
-          caption: "flex justify-center pt-1 relative items-center",
+          // v9 API: Updated for table-based structure
+          months: "",
+          // No wrapper - removed by CustomMonths
+          month: "",
+          // No wrapper - removed by CustomMonth
+          month_caption: "",
+          // Now handled by custom component (renders as <caption>)
           caption_label: "text-sm font-medium",
-          nav: "space-x-1 flex items-center",
-          nav_button: cn(
-            "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          nav: "relative flex items-center justify-center space-x-1",
+          // v9: button_previous and button_next for navigation buttons
+          button_previous: cn(
+            "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+            "border border-input hover:bg-acc-100",
+            "inline-flex items-center justify-center rounded-md",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2"
+          ),
+          button_next: cn(
+            "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
             "border border-input hover:bg-acc-100",
             "inline-flex items-center justify-center rounded-md",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2"
           ),
-          nav_button_previous: "absolute left-1",
-          nav_button_next: "absolute right-1",
-          table: "w-full border-collapse space-y-1",
-          head_row: "flex",
-          head_cell: "text-sec-600 rounded-md w-9 font-normal text-[0.8rem]",
-          row: "flex w-full mt-2",
-          cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-acc-50/50 [&:has([aria-selected])]:bg-acc-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-          day: cn(
+          // v9: table -> month_grid (now a proper <table>)
+          month_grid: "",
+          // Styles applied directly to table in CustomMonth
+          // v9: head_row -> weekdays (now wrapped in <thead> by custom component)
+          weekdays: "",
+          // Styles applied to <tr> inside <thead>
+          weekday: "text-sec-600 rounded-md w-9 font-normal text-[0.8rem]",
+          // v9: row -> week (now a proper <tr>)
+          week: "mt-2",
+          // v9: cell -> day (now a proper <td> by custom component)
+          day: "",
+          // Styles moved to <td> in custom component
+          // v9: day -> day_button (the button inside the cell)
+          day_button: cn(
             "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
             "hover:bg-acc-100 hover:text-main-600",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2",
             "inline-flex items-center justify-center rounded-md"
           ),
-          day_range_end: "day-range-end",
-          day_selected: "bg-main-600 text-main-50 hover:bg-main-600 hover:text-main-50 focus:bg-main-600 focus:text-main-50",
-          day_today: "bg-sec-100 text-main-600 font-semibold",
-          day_outside: "day-outside text-sec-400 opacity-50 aria-selected:bg-acc-50/50 aria-selected:text-sec-400 aria-selected:opacity-30",
-          day_disabled: "text-sec-400 opacity-50 cursor-not-allowed",
-          day_range_middle: "aria-selected:bg-acc-100 aria-selected:text-main-600",
-          day_hidden: "invisible",
+          // v9: day_range_end -> range_end
+          range_end: "range-end",
+          // v9: day_selected -> selected
+          selected: "bg-main-600 text-main-50 hover:bg-main-600 hover:text-main-50 focus:bg-main-600 focus:text-main-50",
+          // v9: day_today -> today
+          today: "bg-sec-100 text-main-600 font-semibold",
+          // v9: day_outside -> outside
+          outside: "outside text-sec-400 opacity-50 aria-selected:bg-acc-50/50 aria-selected:text-sec-400 aria-selected:opacity-30",
+          // v9: day_disabled -> disabled
+          disabled: "text-sec-400 opacity-50 cursor-not-allowed",
+          // v9: day_range_middle -> range_middle
+          range_middle: "aria-selected:bg-acc-100 aria-selected:text-main-600",
+          // v9: day_hidden -> hidden
+          hidden: "invisible",
           ...classNames
         },
         components: defaultComponents
       }
-    ) });
+    );
   }
 );
 Calendar.displayName = "Calendar";
@@ -1779,7 +2078,7 @@ Calendar.displayName = "Calendar";
 import * as React10 from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { X } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var ToastProvider = ToastPrimitives.Provider;
 var ToastViewport = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   ToastPrimitives.Viewport,
@@ -1833,7 +2132,7 @@ var ToastClose = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ),
     "toast-close": "",
     ...props,
-    children: /* @__PURE__ */ jsx10(X, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx10(X, { className: "size-4" })
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
@@ -1859,11 +2158,11 @@ var ToastDescription = React10.forwardRef(({ className, ...props }, ref) => /* @
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 function Toaster() {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsxs4(ToastProvider, { "data-testid": "toast-provider", children: [
+  return /* @__PURE__ */ jsxs5(ToastProvider, { "data-testid": "toast-provider", children: [
     /* @__PURE__ */ jsx10(ToastViewport, {}),
     toasts.map((toast) => {
       const { id, title, description, action, dismiss, duration, ...toastProps } = toast;
-      return /* @__PURE__ */ jsxs4(Toast, { ...toastProps, duration, children: [
+      return /* @__PURE__ */ jsxs5(Toast, { ...toastProps, duration, children: [
         title && /* @__PURE__ */ jsx10(ToastTitle, { children: title }),
         description && /* @__PURE__ */ jsx10(ToastDescription, { children: description }),
         action && action,
@@ -1876,7 +2175,7 @@ function Toaster() {
 // src/components/Form/Form.tsx
 import { useForm, FormProvider, useFormContext, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function Form({
   schema,
   defaultValues,
@@ -1908,8 +2207,8 @@ function FormField({
   const { control, formState: { errors } } = useFormContext();
   const fieldError = errors[name];
   const errorMessage = fieldError && typeof fieldError === "object" && "message" in fieldError ? String(fieldError.message) : void 0;
-  return /* @__PURE__ */ jsxs5("div", { className: cn("space-y-2", className), children: [
-    label && /* @__PURE__ */ jsxs5(Label, { htmlFor: name, children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("space-y-2", className), children: [
+    label && /* @__PURE__ */ jsxs6(Label, { htmlFor: name, children: [
       label,
       validation?.required && /* @__PURE__ */ jsx11("span", { className: "text-destructive ml-1", "aria-label": "required", children: "*" })
     ] }),
@@ -1946,8 +2245,8 @@ function FormField({
 }
 
 // src/components/LoginForm/LoginForm.tsx
-import React11, { useState as useState6, useCallback as useCallback6, useMemo as useMemo3 } from "react";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import React11, { useState as useState7, useCallback as useCallback7, useMemo as useMemo4 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var LoginForm = React11.memo(({
   onSignIn,
   onSuccess,
@@ -1960,18 +2259,18 @@ var LoginForm = React11.memo(({
   onSignUp,
   className
 }) => {
-  const [formData, setFormData] = useState6({ email: "", password: "" });
-  const [error, setError] = useState6(null);
-  const isFormValid = useMemo3(() => {
+  const [formData, setFormData] = useState7({ email: "", password: "" });
+  const [error, setError] = useState7(null);
+  const isFormValid = useMemo4(() => {
     return formData.email.length > 0 && formData.password.length > 0;
   }, [formData.email, formData.password]);
-  const handleEmailChange = useCallback6((e) => {
+  const handleEmailChange = useCallback7((e) => {
     setFormData((prev) => ({ ...prev, email: e.target.value }));
   }, []);
-  const handlePasswordChange = useCallback6((e) => {
+  const handlePasswordChange = useCallback7((e) => {
     setFormData((prev) => ({ ...prev, password: e.target.value }));
   }, []);
-  const handleSubmit = useCallback6(async (e) => {
+  const handleSubmit = useCallback7(async (e) => {
     e.preventDefault();
     setError(null);
     if (!isFormValid || isLoading) return;
@@ -1984,17 +2283,17 @@ var LoginForm = React11.memo(({
       onError?.(err instanceof Error ? err : new Error(errorMessage));
     }
   }, [formData, isFormValid, isLoading, onSignIn, onSuccess, onError]);
-  const handleSignUpClick = useCallback6(() => {
+  const handleSignUpClick = useCallback7(() => {
     onSignUp?.();
   }, [onSignUp]);
-  const displayTitle = useMemo3(() => title || (appName ? `Sign in to ${appName}` : "Sign In"), [title, appName]);
-  const displaySubtitle = useMemo3(() => subtitle || "Enter your credentials to continue.", [subtitle]);
-  return /* @__PURE__ */ jsx12(Card, { className: cn("w-full max-w-md mx-auto", className), children: /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, "data-testid": "login-form", children: [
-    /* @__PURE__ */ jsxs6(CardHeader, { className: "space-y-1", children: [
+  const displayTitle = useMemo4(() => title || (appName ? `Sign in to ${appName}` : "Sign In"), [title, appName]);
+  const displaySubtitle = useMemo4(() => subtitle || "Enter your credentials to continue.", [subtitle]);
+  return /* @__PURE__ */ jsx12(Card, { className: cn("w-full max-w-md mx-auto", className), children: /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, "data-testid": "login-form", children: [
+    /* @__PURE__ */ jsxs7(CardHeader, { className: "space-y-1", children: [
       /* @__PURE__ */ jsx12(CardTitle, { className: "text-2xl text-center", children: displayTitle }),
       /* @__PURE__ */ jsx12(CardDescription, { className: "text-center", children: displaySubtitle })
     ] }),
-    /* @__PURE__ */ jsxs6(CardContent, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs7(CardContent, { className: "space-y-4", children: [
       error && /* @__PURE__ */ jsx12(Alert, { variant: "destructive", role: "alert", "aria-live": "assertive", children: /* @__PURE__ */ jsx12(AlertDescription, { children: error }) }),
       /* @__PURE__ */ jsx12(Label, { htmlFor: "email", children: "Email" }),
       /* @__PURE__ */ jsx12(
@@ -2023,7 +2322,7 @@ var LoginForm = React11.memo(({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6(CardFooter, { className: "flex flex-col space-y-4", children: [
+    /* @__PURE__ */ jsxs7(CardFooter, { className: "flex flex-col space-y-4", children: [
       /* @__PURE__ */ jsx12(
         Button,
         {
@@ -2041,7 +2340,7 @@ var LoginForm = React11.memo(({
           className: "text-primary hover:underline",
           children: "Don't have an account? Sign up"
         }
-      ) }) : /* @__PURE__ */ jsxs6("p", { className: "text-center text-muted-foreground", children: [
+      ) }) : /* @__PURE__ */ jsxs7("p", { className: "text-center text-muted-foreground", children: [
         "Don't have an account?",
         " ",
         /* @__PURE__ */ jsx12("a", { href: "/signup", className: "text-primary hover:underline", children: "Sign up" })
@@ -2052,8 +2351,8 @@ var LoginForm = React11.memo(({
 
 // src/components/EventSelector/EventSelector.tsx
 import { RefreshCw, AlertCircle, Lock, Calendar as Calendar2, Star } from "lucide-react";
-import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5 } from "react";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef6 } from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function EventSelector({
   placeholder = "Select an event",
   className,
@@ -2111,13 +2410,13 @@ function EventSelector({
       return date.toLocaleDateString();
     }
   };
-  const sortedEvents = useMemo4(() => {
+  const sortedEvents = useMemo5(() => {
     const getTime = (e) => e.event_date ? new Date(e.event_date).getTime() : Number.NEGATIVE_INFINITY;
     return [...events].sort((a, b) => getTime(b) - getTime(a));
   }, [events]);
-  const prevEventsLengthRef = useRef5(events.length);
-  const prevSelectedEventIdRef = useRef5(selectedEvent?.event_id);
-  const hasAutoSelectedRef = useRef5(false);
+  const prevEventsLengthRef = useRef6(events.length);
+  const prevSelectedEventIdRef = useRef6(selectedEvent?.event_id);
+  const hasAutoSelectedRef = useRef6(false);
   useEffect6(() => {
     const eventsLengthChanged = events.length !== prevEventsLengthRef.current;
     const selectedEventChanged = selectedEvent?.event_id !== prevSelectedEventIdRef.current;
@@ -2159,17 +2458,17 @@ function EventSelector({
     }
   }, [events.length, selectedEvent?.event_id, isLoading, setSelectedEvent, onEventChange]);
   if (isLoading) {
-    return /* @__PURE__ */ jsxs7("div", { className: `flex items-center gap-2 ${className}`, children: [
+    return /* @__PURE__ */ jsxs8("div", { className: `flex items-center gap-2 ${className}`, children: [
       /* @__PURE__ */ jsx13(LoadingSpinner, { size: "sm" }),
       /* @__PURE__ */ jsx13("span", { className: "text-sm text-muted-foreground", children: "Loading events..." })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsxs7(Alert, { variant: "destructive", children: [
-      /* @__PURE__ */ jsx13(Lock, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsxs7(AlertDescription, { className: "flex items-center justify-between", children: [
+    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsxs8(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx13(Lock, { className: "size-4" }),
+      /* @__PURE__ */ jsxs8(AlertDescription, { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx13("span", { children: error.message }),
-        showRetryButton && /* @__PURE__ */ jsxs7(
+        showRetryButton && /* @__PURE__ */ jsxs8(
           Button,
           {
             variant: "outline",
@@ -2177,7 +2476,7 @@ function EventSelector({
             onClick: handleRetry,
             className: "ml-2",
             children: [
-              /* @__PURE__ */ jsx13(RefreshCw, { className: "h-3 w-3 mr-1" }),
+              /* @__PURE__ */ jsx13(RefreshCw, { className: "size-3 mr-1" }),
               "Retry"
             ]
           }
@@ -2187,11 +2486,11 @@ function EventSelector({
   }
   if (events.length === 0) {
     if (showNoEventsMessage) {
-      return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsxs7(Alert, { variant: "inline", children: [
-        /* @__PURE__ */ jsx13(AlertCircle, { className: "h-4 w-4 text-acc-700" }),
-        /* @__PURE__ */ jsxs7(AlertDescription, { className: "flex items-center justify-between", children: [
+      return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsxs8(Alert, { variant: "inline", children: [
+        /* @__PURE__ */ jsx13(AlertCircle, { className: "size-4 text-acc-700" }),
+        /* @__PURE__ */ jsxs8(AlertDescription, { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx13("span", { children: "No events available." }),
-          showRetryButton && /* @__PURE__ */ jsxs7(
+          showRetryButton && /* @__PURE__ */ jsxs8(
             Button,
             {
               variant: "outline",
@@ -2199,7 +2498,7 @@ function EventSelector({
               onClick: handleRetry,
               className: "ml-2",
               children: [
-                /* @__PURE__ */ jsx13(RefreshCw, { className: "h-3 w-3 mr-1" }),
+                /* @__PURE__ */ jsx13(RefreshCw, { className: "size-3 mr-1" }),
                 "Refresh"
               ]
             }
@@ -2209,17 +2508,17 @@ function EventSelector({
     }
     return null;
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     Select,
     {
       value: selectedEvent ? selectedEvent.event_id || selectedEvent.id : "",
       onValueChange: handleValueChange,
       className,
       children: [
-        /* @__PURE__ */ jsx13(SelectTrigger, { className: "text-left", variant: "outline", children: /* @__PURE__ */ jsx13(SelectValue, { placeholder, children: selectedEvent && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx13(Calendar2, { className: "h-4 w-4 flex-shrink-0" }),
+        /* @__PURE__ */ jsx13(SelectTrigger, { className: "text-left", variant: "outline", children: /* @__PURE__ */ jsx13(SelectValue, { placeholder, children: selectedEvent && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx13(Calendar2, { className: "size-4 flex-shrink-0" }),
           /* @__PURE__ */ jsx13("span", { className: "truncate", children: selectedEvent.event_name }),
-          selectedEvent.event_date && /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: [
+          selectedEvent.event_date && /* @__PURE__ */ jsxs8("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: [
             "(",
             formatEventDate(selectedEvent.event_date),
             ")"
@@ -2233,19 +2532,19 @@ function EventSelector({
             {
               value: event.event_id || event.id,
               className: "flex items-center justify-between",
-              children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 w-full", children: [
-                showNextEventIndicator && isNext && /* @__PURE__ */ jsx13(Star, { className: "h-3 w-3 text-acc-500" }),
-                /* @__PURE__ */ jsxs7("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+              children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 w-full", children: [
+                showNextEventIndicator && isNext && /* @__PURE__ */ jsx13(Star, { className: "size-3 text-acc-500" }),
+                /* @__PURE__ */ jsxs8("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx13("span", { className: isSelected ? "font-semibold" : "", children: event.event_name }),
                     isSelected && /* @__PURE__ */ jsx13("span", { className: "text-xs bg-primary text-primary-foreground px-1 rounded", children: "Current" })
                   ] }),
-                  showEventDetails && event.event_date && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-                    /* @__PURE__ */ jsx13(Calendar2, { className: "h-3 w-3" }),
+                  showEventDetails && event.event_date && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx13(Calendar2, { className: "size-3" }),
                     /* @__PURE__ */ jsx13("span", { children: formatEventDate(event.event_date) }),
                     showNextEventIndicator && isNext && /* @__PURE__ */ jsx13("span", { className: "text-acc-600 font-medium", children: "(Next)" })
                   ] }),
-                  showEventDetails && event.event_venue && /* @__PURE__ */ jsxs7("div", { className: "text-xs text-muted-foreground", children: [
+                  showEventDetails && event.event_venue && /* @__PURE__ */ jsxs8("div", { className: "text-xs text-muted-foreground", children: [
                     "\u{1F4CD} ",
                     event.event_venue
                   ] })
@@ -2261,9 +2560,9 @@ function EventSelector({
 }
 
 // src/components/OrganisationSelector/OrganisationSelector.tsx
-import { useState as useState7, useCallback as useCallback7 } from "react";
+import { useState as useState8, useCallback as useCallback8, useMemo as useMemo6 } from "react";
 import { RefreshCw as RefreshCw2, AlertCircle as AlertCircle2, Building2, Shield } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function OrganisationSelector({
   placeholder = "Select organisation",
   className,
@@ -2274,8 +2573,8 @@ function OrganisationSelector({
   compact = false,
   disabled = false
 }) {
-  const [isLoading, setIsLoading] = useState7(false);
-  const [switchError, setSwitchError] = useState7(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [switchError, setSwitchError] = useState8(null);
   const {
     organisations,
     selectedOrganisation,
@@ -2286,7 +2585,7 @@ function OrganisationSelector({
     validateOrganisationAccess,
     refreshOrganisations
   } = useOrganisations();
-  const handleOrganisationChange = useCallback7(async (orgId) => {
+  const handleOrganisationChange = useCallback8(async (orgId) => {
     if (disabled || isLoading) return;
     setSwitchError(null);
     setIsLoading(true);
@@ -2314,7 +2613,7 @@ function OrganisationSelector({
     organisations,
     onOrganisationChange
   ]);
-  const handleRetry = useCallback7(async () => {
+  const handleRetry = useCallback8(async () => {
     setIsLoading(true);
     setSwitchError(null);
     try {
@@ -2327,21 +2626,21 @@ function OrganisationSelector({
     }
   }, [refreshOrganisations]);
   if (orgLoading) {
-    return /* @__PURE__ */ jsxs8("div", { className: `flex items-center gap-2 ${className}`, children: [
+    return /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 ${className}`, children: [
       /* @__PURE__ */ jsx14(LoadingSpinner, { size: "sm" }),
       /* @__PURE__ */ jsx14("span", { className: "text-sm text-muted-foreground", children: compact ? "Loading..." : "Loading organisations..." })
     ] });
   }
   if (orgError) {
-    return /* @__PURE__ */ jsxs8("div", { className: `space-y-2 ${className}`, children: [
-      /* @__PURE__ */ jsxs8(Alert, { variant: "destructive", children: [
-        /* @__PURE__ */ jsx14(AlertCircle2, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsxs8(AlertDescription, { children: [
+    return /* @__PURE__ */ jsxs9("div", { className: `space-y-2 ${className}`, children: [
+      /* @__PURE__ */ jsxs9(Alert, { variant: "destructive", children: [
+        /* @__PURE__ */ jsx14(AlertCircle2, { className: "size-4" }),
+        /* @__PURE__ */ jsxs9(AlertDescription, { children: [
           "Failed to load organisations: ",
           orgError.message
         ] })
       ] }),
-      showRetryButton && /* @__PURE__ */ jsxs8(
+      showRetryButton && /* @__PURE__ */ jsxs9(
         Button,
         {
           variant: "outline",
@@ -2350,7 +2649,7 @@ function OrganisationSelector({
           disabled: isLoading,
           className: "w-full",
           children: [
-            /* @__PURE__ */ jsx14(RefreshCw2, { className: `h-4 w-4 mr-2 ${isLoading ? "animate-spin" : ""}` }),
+            /* @__PURE__ */ jsx14(RefreshCw2, { className: `size-4 mr-2 ${isLoading ? "animate-spin" : ""}` }),
             "Retry"
           ]
         }
@@ -2359,12 +2658,12 @@ function OrganisationSelector({
   }
   if (organisations.length === 0) {
     if (showNoOrganisationsMessage) {
-      return /* @__PURE__ */ jsxs8("div", { className: `space-y-2 ${className}`, children: [
-        /* @__PURE__ */ jsxs8(Alert, { children: [
-          /* @__PURE__ */ jsx14(Building2, { className: "h-4 w-4" }),
+      return /* @__PURE__ */ jsxs9("div", { className: `space-y-2 ${className}`, children: [
+        /* @__PURE__ */ jsxs9(Alert, { children: [
+          /* @__PURE__ */ jsx14(Building2, { className: "size-4" }),
           /* @__PURE__ */ jsx14(AlertDescription, { children: "No organisations available. Please contact your administrator to be added to an organisation." })
         ] }),
-        showRetryButton && /* @__PURE__ */ jsxs8(
+        showRetryButton && /* @__PURE__ */ jsxs9(
           Button,
           {
             variant: "outline",
@@ -2373,7 +2672,7 @@ function OrganisationSelector({
             disabled: isLoading,
             className: "w-full",
             children: [
-              /* @__PURE__ */ jsx14(RefreshCw2, { className: `h-4 w-4 mr-2 ${isLoading ? "animate-spin" : ""}` }),
+              /* @__PURE__ */ jsx14(RefreshCw2, { className: `size-4 mr-2 ${isLoading ? "animate-spin" : ""}` }),
               "Check Again"
             ]
           }
@@ -2382,22 +2681,33 @@ function OrganisationSelector({
     }
     return null;
   }
-  const switchErrorDisplay = switchError && /* @__PURE__ */ jsxs8(Alert, { variant: "destructive", className: "mt-2", children: [
-    /* @__PURE__ */ jsx14(AlertCircle2, { className: "h-4 w-4" }),
+  const switchErrorDisplay = switchError && /* @__PURE__ */ jsxs9(Alert, { variant: "destructive", className: "mt-2", children: [
+    /* @__PURE__ */ jsx14(AlertCircle2, { className: "size-4" }),
     /* @__PURE__ */ jsx14(AlertDescription, { children: switchError })
   ] });
-  return /* @__PURE__ */ jsxs8("div", { className: `space-y-2 ${className}`, children: [
-    /* @__PURE__ */ jsxs8(
+  const isSelectDisabled = disabled || isLoading;
+  const selectValue = useMemo6(() => {
+    return selectedOrganisation?.id || "";
+  }, [selectedOrganisation?.id]);
+  return /* @__PURE__ */ jsxs9("div", { className, children: [
+    /* @__PURE__ */ jsxs9(
       Select,
       {
-        value: selectedOrganisation?.id || "",
+        value: selectValue,
         onValueChange: handleOrganisationChange,
-        disabled: disabled || isLoading || !selectedOrganisation,
+        disabled: isSelectDisabled,
         children: [
-          /* @__PURE__ */ jsx14(SelectTrigger, { className: `${isLoading ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-            isLoading ? /* @__PURE__ */ jsx14(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx14(Building2, { className: "h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ jsx14(SelectValue, { placeholder })
-          ] }) }),
+          /* @__PURE__ */ jsx14(
+            SelectTrigger,
+            {
+              className: "text-left",
+              variant: "outline",
+              children: /* @__PURE__ */ jsx14(SelectValue, { placeholder, children: selectedOrganisation && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                isLoading ? /* @__PURE__ */ jsx14(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx14(Building2, { className: "size-4 flex-shrink-0" }),
+                /* @__PURE__ */ jsx14("span", { className: "truncate", children: selectedOrganisation.display_name })
+              ] }) })
+            }
+          ),
           /* @__PURE__ */ jsx14(SelectContent, { children: organisations.map((org) => {
             const userRole = getUserRole(org.id);
             const hasAccess = validateOrganisationAccess(org.id);
@@ -2407,16 +2717,16 @@ function OrganisationSelector({
                 value: org.id,
                 disabled: !hasAccess,
                 className: !hasAccess ? "opacity-50" : "",
-                children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between w-full", children: [
-                  /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx14(Building2, { className: "h-4 w-4" }),
-                    /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+                children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between w-full", children: [
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx14(Building2, { className: "size-4" }),
+                    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
                       /* @__PURE__ */ jsx14("span", { className: "font-medium", children: org.display_name }),
                       !compact && org.description && /* @__PURE__ */ jsx14("span", { className: "text-xs text-muted-foreground truncate max-w-40", children: org.description })
                     ] })
                   ] }),
-                  showRole && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 ml-4", children: [
-                    /* @__PURE__ */ jsx14(Shield, { className: "h-3 w-3 text-muted-foreground" }),
+                  showRole && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 ml-4", children: [
+                    /* @__PURE__ */ jsx14(Shield, { className: "size-3 text-muted-foreground" }),
                     /* @__PURE__ */ jsx14("span", { className: "text-xs text-muted-foreground capitalize", children: userRole?.replace("_", " ") || "No Role" })
                   ] })
                 ] })
@@ -2427,18 +2737,18 @@ function OrganisationSelector({
         ]
       }
     ),
-    switchErrorDisplay
+    switchErrorDisplay && /* @__PURE__ */ jsx14("div", { className: "mt-2", children: switchErrorDisplay })
   ] });
 }
 
 // src/components/PasswordChange/PasswordChangeForm.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function PasswordChangeForm({ onSubmit, className }) {
-  const [newPassword, setNewPassword] = useState8("");
-  const [confirmPassword, setConfirmPassword] = useState8("");
-  const [error, setError] = useState8(null);
-  const [isSubmitting, setIsSubmitting] = useState8(false);
+  const [newPassword, setNewPassword] = useState9("");
+  const [confirmPassword, setConfirmPassword] = useState9("");
+  const [error, setError] = useState9(null);
+  const [isSubmitting, setIsSubmitting] = useState9(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -2463,9 +2773,9 @@ function PasswordChangeForm({ onSubmit, className }) {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
+  return /* @__PURE__ */ jsxs10("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
     error && /* @__PURE__ */ jsx15("div", { role: "alert", children: error }),
-    /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx15(Label, { htmlFor: "new-password", children: "New Password" }),
       /* @__PURE__ */ jsx15(
         Input,
@@ -2479,7 +2789,7 @@ function PasswordChangeForm({ onSubmit, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx15(Label, { htmlFor: "confirm-password", children: "Confirm Password" }),
       /* @__PURE__ */ jsx15(
         Input,
@@ -2506,9 +2816,9 @@ function PasswordChangeForm({ onSubmit, className }) {
 }
 
 // src/components/UserMenu/UserMenu.tsx
-import React14, { useCallback as useCallback8, useMemo as useMemo5, useState as useState9 } from "react";
+import React14, { useCallback as useCallback9, useMemo as useMemo7, useState as useState10 } from "react";
 import { ChevronDown, LogOut, KeyRound } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var UserMenu = React14.memo(function UserMenu2({
   user,
   onSignOut,
@@ -2516,8 +2826,8 @@ var UserMenu = React14.memo(function UserMenu2({
   className,
   showAvatar = true
 }) {
-  const [isPasswordDialogOpen, setPasswordDialogOpen] = useState9(false);
-  const userInfo = useMemo5(() => {
+  const [isPasswordDialogOpen, setPasswordDialogOpen] = useState10(false);
+  const userInfo = useMemo7(() => {
     if (!user) return null;
     return {
       email: user.email,
@@ -2526,15 +2836,15 @@ var UserMenu = React14.memo(function UserMenu2({
       initial: (user.user_metadata?.display_name || user.user_metadata?.full_name || user.email || "U").charAt(0).toUpperCase()
     };
   }, [user]);
-  const handleSignOut = useCallback8(async () => {
+  const handleSignOut = useCallback9(async () => {
     if (onSignOut) await onSignOut();
   }, [onSignOut]);
   if (!user || !userInfo) {
     return null;
   }
-  return /* @__PURE__ */ jsxs10(Dialog, { open: isPasswordDialogOpen, onOpenChange: setPasswordDialogOpen, children: [
-    /* @__PURE__ */ jsxs10(Select, { className, children: [
-      /* @__PURE__ */ jsx16(SelectTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(Button, { variant: "outline", className: "flex items-center gap-2", "aria-label": userInfo.displayName, children: [
+  return /* @__PURE__ */ jsxs11(Dialog, { open: isPasswordDialogOpen, onOpenChange: setPasswordDialogOpen, children: [
+    /* @__PURE__ */ jsxs11(Select, { className, children: [
+      /* @__PURE__ */ jsx16(SelectTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "flex items-center gap-2", "aria-label": userInfo.displayName, children: [
         showAvatar && /* @__PURE__ */ jsx16(
           Avatar,
           {
@@ -2545,26 +2855,26 @@ var UserMenu = React14.memo(function UserMenu2({
           }
         ),
         /* @__PURE__ */ jsx16("span", { children: userInfo.displayName }),
-        /* @__PURE__ */ jsx16(ChevronDown, { className: "h-4 w-4" })
+        /* @__PURE__ */ jsx16(ChevronDown, { className: "size-4" })
       ] }) }),
-      /* @__PURE__ */ jsxs10(SelectContent, { children: [
-        /* @__PURE__ */ jsx16(SelectLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col space-y-1", children: [
+      /* @__PURE__ */ jsxs11(SelectContent, { children: [
+        /* @__PURE__ */ jsx16(SelectLabel, { className: "font-normal", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col space-y-1", children: [
           /* @__PURE__ */ jsx16("p", { className: "font-medium", children: userInfo.displayName }),
           /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: userInfo.email })
         ] }) }),
         /* @__PURE__ */ jsx16(SelectSeparator, {}),
-        /* @__PURE__ */ jsx16(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(SelectItem, { value: "change-password", children: [
-          /* @__PURE__ */ jsx16(KeyRound, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ jsx16(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(SelectItem, { value: "change-password", children: [
+          /* @__PURE__ */ jsx16(KeyRound, { className: "mr-2 size-4" }),
           /* @__PURE__ */ jsx16("span", { children: "Change Password" })
         ] }) }),
-        /* @__PURE__ */ jsxs10(SelectItem, { value: "sign-out", onClick: handleSignOut, children: [
-          /* @__PURE__ */ jsx16(LogOut, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ jsxs11(SelectItem, { value: "sign-out", onClick: handleSignOut, children: [
+          /* @__PURE__ */ jsx16(LogOut, { className: "mr-2 size-4" }),
           /* @__PURE__ */ jsx16("span", { children: "Sign out" })
         ] })
       ] })
     ] }),
     /* @__PURE__ */ jsx16(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs10(DialogContent, { className, children: [
+    /* @__PURE__ */ jsxs11(DialogContent, { className, children: [
       /* @__PURE__ */ jsx16(DialogHeader, { children: /* @__PURE__ */ jsx16(DialogTitle, { children: "Change Password" }) }),
       /* @__PURE__ */ jsx16(
         PasswordChangeForm,
@@ -2585,8 +2895,8 @@ var UserMenu = React14.memo(function UserMenu2({
   ] });
 });
 var UserMenuLoading = React14.memo(function UserMenuLoading2() {
-  return /* @__PURE__ */ jsxs10("div", { className: "relative inline-block text-left", children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11("div", { className: "relative inline-block text-left", children: [
+    /* @__PURE__ */ jsxs11(
       "button",
       {
         type: "button",
@@ -2607,7 +2917,7 @@ UserMenu.Loading = UserMenuLoading;
 // src/components/NavigationMenu/NavigationMenu.tsx
 import * as React15 from "react";
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var NavigationMenu = React15.forwardRef(({
   items,
   mode = "dropdown",
@@ -2660,7 +2970,7 @@ var NavigationMenu = React15.forwardRef(({
       }
       const userId2 = authContext.user.id;
       const appName = authContext.appName;
-      import("./api-YP7XD5L6.js").then(({ resolveAppContext }) => {
+      import("./api-IHKALJZD.js").then(({ resolveAppContext }) => {
         resolveAppContext({
           userId: userId2,
           appName
@@ -3011,8 +3321,8 @@ var NavigationMenu = React15.forwardRef(({
     const hasChildren = item.children && item.children.length > 0;
     const isExpanded = expandedItems.has(item.id);
     const itemIsActive = isActiveItem(item);
-    return /* @__PURE__ */ jsx17("li", { role: "none", children: hasChildren ? /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsx17("li", { role: "none", children: hasChildren ? /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsxs12(
         "button",
         {
           onClick: () => toggleExpanded(item.id),
@@ -3053,7 +3363,7 @@ var NavigationMenu = React15.forwardRef(({
     ) });
   };
   if (mode === "dropdown") {
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       Select,
       {
         onValueChange: handleNavigationSelect,
@@ -3102,7 +3412,7 @@ NavigationMenu.displayName = "NavigationMenu";
 
 // src/components/Header/Header.tsx
 import { Link } from "react-router-dom";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function Header({
   logoUrl,
   logoAlt = "Logo",
@@ -3121,10 +3431,25 @@ function Header({
   onNavigate,
   logoHref
 }) {
+  const OrganisationSelectorConditional = () => {
+    const { organisations, isContextReady } = useOrganisations();
+    if (!isContextReady || !organisations || organisations.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx18(
+      OrganisationSelector,
+      {
+        placeholder: "Select organisation",
+        className: "w-64",
+        "data-testid": "org-selector",
+        compact: true
+      }
+    );
+  };
   return /* @__PURE__ */ jsx18("header", { className: cn(
     "w-full border-b border-main-200 h-16 shadow-sm bg-main-100 ",
     className
-  ), role: "banner", children: /* @__PURE__ */ jsxs12("nav", { className: "px-4 w-[min(var(--app-width),100%)] mx-auto flex items-center gap-4 h-full", children: [
+  ), role: "banner", children: /* @__PURE__ */ jsxs13("nav", { className: "px-4 w-[min(var(--app-width),100%)] mx-auto flex items-center gap-4 h-full", children: [
     logo ? logoHref ? /* @__PURE__ */ jsx18(Link, { to: logoHref, className: "cursor-pointer hover:opacity-80 transition-opacity", children: logo }) : logo : logoUrl ? logoHref ? /* @__PURE__ */ jsx18(Link, { to: logoHref, className: "cursor-pointer hover:opacity-80 transition-opacity", children: /* @__PURE__ */ jsx18(
       "img",
       {
@@ -3144,14 +3469,14 @@ function Header({
       {
         src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E",
         alt: logoAlt || "Logo",
-        className: "h-8 w-8 shadow-md"
+        className: "size-8 shadow-md"
       }
     ) }) : /* @__PURE__ */ jsx18(
       "img",
       {
         src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E",
         alt: logoAlt || "Logo",
-        className: "h-8 w-8 shadow-md"
+        className: "size-8 shadow-md"
       }
     ),
     navItems && navItems.length > 0 && /* @__PURE__ */ jsx18(
@@ -3165,16 +3490,8 @@ function Header({
         itemsPreFiltered: true
       }
     ),
-    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-4 ml-auto", children: [
-      showOrgSelector ? /* @__PURE__ */ jsx18(
-        OrganisationSelector,
-        {
-          placeholder: "Select organisation",
-          className: "w-64",
-          "data-testid": "org-selector",
-          compact: true
-        }
-      ) : null,
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-4 ml-auto", children: [
+      showOrgSelector ? /* @__PURE__ */ jsx18(OrganisationSelectorConditional, {}) : null,
       showEventSelector ? /* @__PURE__ */ jsx18(
         EventSelector,
         {
@@ -3199,7 +3516,7 @@ function Header({
 
 // src/components/Footer/Footer.tsx
 import React16 from "react";
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var FooterComponent = ({
   companyName = "Solvera Solutions Pty Ltd",
   year = (/* @__PURE__ */ new Date()).getFullYear(),
@@ -3210,9 +3527,9 @@ var FooterComponent = ({
   children
 }) => {
   const copyrightText = copyright || `\xA9 Copyright 2022\u2013${year} all rights reserved, ${companyName}.`;
-  return /* @__PURE__ */ jsx19("footer", { className: cn("mt-8 py-6 flex justify-center border-t border-border bg-main-100", className), children: /* @__PURE__ */ jsxs13("section", { className: "px-4 w-[min(var(--app-width),100%)] mx-auto text-center", children: [
+  return /* @__PURE__ */ jsx19("footer", { className: cn("mt-8 py-6 flex justify-center border-t border-border bg-main-100", className), children: /* @__PURE__ */ jsxs14("section", { className: "px-4 w-[min(var(--app-width),100%)] mx-auto text-center", children: [
     logo && /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8 w-auto" }),
-    children && /* @__PURE__ */ jsx19(Fragment4, { children }),
+    children && /* @__PURE__ */ jsx19(Fragment6, { children }),
     /* @__PURE__ */ jsx19("span", { className: "text-muted-foreground", children: copyrightText }),
     links && links.length > 0 && /* @__PURE__ */ jsx19("ul", { className: "flex gap-4 mt-2 md:mt-0", children: links.map((link, index) => /* @__PURE__ */ jsx19("li", { children: /* @__PURE__ */ jsx19("a", { href: link.href, className: "text-muted-foreground hover:text-foreground", children: link.label }) }, index)) })
   ] }) });
@@ -3222,9 +3539,9 @@ var Footer = React16.memo(FooterComponent);
 Footer.displayName = "Footer";
 
 // src/components/PaceAppLayout/PaceAppLayout.tsx
-import { useState as useState11, useEffect as useEffect8, useMemo as useMemo7 } from "react";
+import { useState as useState12, useEffect as useEffect8, useMemo as useMemo9 } from "react";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var EMPTY_PAGE_ID_MAPPING = {};
 var EMPTY_ROUTE_PERMISSIONS = {};
 function PaceAppLayout({
@@ -3258,7 +3575,13 @@ function PaceAppLayout({
   onRouteStrictModeViolation
 }) {
   const { user, signOut, updatePassword, supabase, appId: contextAppId } = useUnifiedAuth();
-  const { selectedOrganisation } = useOrganisations();
+  const {
+    selectedOrganisation,
+    isContextReady,
+    hasValidOrganisationContext,
+    ensureOrganisationContext,
+    isLoading: organisationLoading
+  } = useOrganisations();
   const navigate = useNavigate();
   const location = useLocation();
   useEventTheme();
@@ -3274,7 +3597,7 @@ function PaceAppLayout({
     selectedEventId: selectedEvent?.event_id || null
   });
   const resolvedAppId = contextAppId || resolvedScope?.appId;
-  const scope = useMemo7(() => {
+  const scope = useMemo9(() => {
     if (resolvedScope?.organisationId) {
       return resolvedScope;
     }
@@ -3291,19 +3614,19 @@ function PaceAppLayout({
       appId: resolvedAppId || resolvedScope?.appId || void 0
     };
   }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
-  const defaultNavItems = useMemo7(() => [
+  const defaultNavItems = useMemo9(() => [
     { id: "home", label: "Home", href: "/", icon: "Home" },
     { id: "dashboard", label: "Dashboard", href: "/dashboard", icon: "LayoutDashboard" },
     { id: "settings", label: "Settings", href: "/settings", icon: "Settings" },
     { id: "ui-showcase", label: "UI Showcase", href: "/ui-showcase", icon: "Component" },
     { id: "data-table-showcase", label: "DataTable Showcase", href: "/data-table-showcase", icon: "Table" }
   ], []);
-  const baseMenuItems = useMemo7(() => navItems || defaultNavItems, [navItems]);
-  const currentRoutePermission = useMemo7(() => {
+  const baseMenuItems = useMemo9(() => navItems || defaultNavItems, [navItems]);
+  const currentRoutePermission = useMemo9(() => {
     const currentPath = location.pathname;
     return routePermissions[currentPath] || defaultPermission;
   }, [location.pathname, routePermissions, defaultPermission]);
-  const currentPageId = useMemo7(() => {
+  const currentPageId = useMemo9(() => {
     const currentPath = location.pathname;
     if (pageIdMapping[currentPath]) {
       return pageIdMapping[currentPath];
@@ -3311,15 +3634,15 @@ function PaceAppLayout({
     const pathSegments = currentPath.slice(1).split("/").filter(Boolean);
     return pathSegments[0] || "home";
   }, [location.pathname, pageIdMapping]);
-  const currentPermission = useMemo7(() => {
+  const currentPermission = useMemo9(() => {
     if (!enforcePermissions) {
       return "read:page.home";
     }
     const permissionString = `${currentRoutePermission}:page.${currentPageId}`;
     return permissionString;
   }, [enforcePermissions, currentRoutePermission, currentPageId]);
-  const [isSuperAdminUser, setIsSuperAdminUser] = useState11(false);
-  const [isCheckingSuperAdmin, setIsCheckingSuperAdmin] = useState11(false);
+  const [isSuperAdminUser, setIsSuperAdminUser] = useState12(false);
+  const [isCheckingSuperAdmin, setIsCheckingSuperAdmin] = useState12(false);
   useEffect8(() => {
     const checkSuperAdminStatus = async () => {
       if (!user?.id) {
@@ -3345,8 +3668,10 @@ function PaceAppLayout({
     scope,
     currentPermission,
     currentPageId,
-    true
+    true,
     // useCache
+    appName
+    // Pass appName for PORTAL/ADMIN special case
   );
   const can = isSuperAdminUser ? true : canFromHook;
   const hasPermission = enforcePermissions ? can : true;
@@ -3373,7 +3698,7 @@ function PaceAppLayout({
       onPageAccessDenied(currentPageId, currentRoutePermission);
     }
   }, [enforcePermissions, can, isCheckingPermission, isCheckingSuperAdmin, isSuperAdminUser, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
-  const [filteredMenuItems, setFilteredMenuItems] = useState11(baseMenuItems);
+  const [filteredMenuItems, setFilteredMenuItems] = useState12(baseMenuItems);
   useEffect8(() => {
     let isMounted = true;
     const filterItems = async () => {
@@ -3400,7 +3725,7 @@ function PaceAppLayout({
         return;
       }
       try {
-        const { isSuperAdmin: isSuperAdmin2 } = await import("./api-YP7XD5L6.js");
+        const { isSuperAdmin: isSuperAdmin2 } = await import("./api-IHKALJZD.js");
         const isSuper = await isSuperAdmin2(user.id);
         if (isSuper) {
           if (isMounted) {
@@ -3415,7 +3740,7 @@ function PaceAppLayout({
         }
       }
       try {
-        const { getPermissionMap } = await import("./api-YP7XD5L6.js");
+        const { getPermissionMap } = await import("./api-IHKALJZD.js");
         const permissionScope = {
           organisationId: currentScope.organisationId,
           eventId: currentScope.eventId,
@@ -3471,7 +3796,7 @@ function PaceAppLayout({
       let hasAccess = true;
       if (currentRoute.pageId && currentRoute.permissions && currentRoute.permissions.length > 0) {
         try {
-          const { isPermittedCached } = await import("./api-YP7XD5L6.js");
+          const { isPermittedCached } = await import("./api-IHKALJZD.js");
           const hasPagePermission = await isPermittedCached({
             userId: user?.id || "",
             scope,
@@ -3487,7 +3812,7 @@ function PaceAppLayout({
         }
       }
       if (hasAccess && currentRoute.roles && currentRoute.roles.length > 0 && user?.id) {
-        const { useUnifiedAuth: useUnifiedAuth2 } = await import("./UnifiedAuthProvider-643PUAIM.js");
+        const { useUnifiedAuth: useUnifiedAuth2 } = await import("./UnifiedAuthProvider-FTSG5XH7.js");
         hasAccess = true;
       }
       if (!isMounted) return;
@@ -3533,14 +3858,20 @@ function PaceAppLayout({
     }
     return {};
   };
+  if (user?.id && organisationLoading) {
+    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs15("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx20("div", { className: "animate-spin rounded-full size-8 border-b-2 border-sec-900 mx-auto mb-4" }),
+      /* @__PURE__ */ jsx20("p", { className: "text-sec-600", children: "Loading organisation context..." })
+    ] }) });
+  }
   if (enforcePermissions && (isCheckingSuperAdmin || isCheckingPermission)) {
-    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs14("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx20("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-sec-900 mx-auto mb-4" }),
+    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs15("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx20("div", { className: "animate-spin rounded-full size-8 border-b-2 border-sec-900 mx-auto mb-4" }),
       /* @__PURE__ */ jsx20("p", { className: "text-sec-600", children: "Checking permissions..." })
     ] }) });
   }
   if (enforcePermissions && permissionError && !isSuperAdminUser) {
-    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs14("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs15("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx20("h2", { className: "text-xl font-semibold text-acc-600 mb-2", children: "Permission Error" }),
       /* @__PURE__ */ jsx20("p", { className: "text-sec-600 mb-4", children: permissionError.message }),
       /* @__PURE__ */ jsx20(Button, { onClick: () => navigate("/"), children: "Go Home" })
@@ -3548,15 +3879,15 @@ function PaceAppLayout({
   }
   if (enforcePermissions && hasPermission === false && !isCheckingSuperAdmin && !isSuperAdminUser) {
     if (enforcePagePermissions && pagePermissionFallback) {
-      return /* @__PURE__ */ jsx20(Fragment5, { children: pagePermissionFallback });
+      return /* @__PURE__ */ jsx20(Fragment7, { children: pagePermissionFallback });
     }
     if (permissionFallback) {
-      return /* @__PURE__ */ jsx20(Fragment5, { children: permissionFallback });
+      return /* @__PURE__ */ jsx20(Fragment7, { children: permissionFallback });
     }
-    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs14("div", { className: "text-center", children: [
+    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs15("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx20("h2", { className: "text-xl font-semibold text-acc-600 mb-2", children: "Access Denied" }),
       /* @__PURE__ */ jsx20("p", { className: "text-sec-600 mb-4", children: "You don't have permission to access this page." }),
-      /* @__PURE__ */ jsxs14("div", { className: "flex gap-2 justify-center", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex gap-2 justify-center", children: [
         /* @__PURE__ */ jsx20(Button, { onClick: () => navigate("/"), children: "Go Home" }),
         /* @__PURE__ */ jsx20(
           Button,
@@ -3572,7 +3903,7 @@ function PaceAppLayout({
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
     /* @__PURE__ */ jsx20(
       Header,
       {
@@ -3604,9 +3935,9 @@ function PaceAppLayout({
 }
 
 // src/components/PaceLoginPage/PaceLoginPage.tsx
-import { useEffect as useEffect9, useState as useState12, useContext as useContext2 } from "react";
+import { useEffect as useEffect9, useState as useState13, useContext as useContext2 } from "react";
 import { useNavigate as useNavigate2, useLocation as useLocation2 } from "react-router-dom";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var PaceLoginPage = ({
   appName = "Pace",
   onSuccessRedirectPath = "/",
@@ -3615,9 +3946,9 @@ var PaceLoginPage = ({
   const { signIn, isAuthenticated, isLoading, authError, user, supabase } = useUnifiedAuth();
   const navigate = useNavigate2();
   const location = useLocation2();
-  const [isSigningIn, setIsSigningIn] = useState12(false);
-  const [accessError, setAccessError] = useState12(null);
-  const [isCheckingAccess, setIsCheckingAccess] = useState12(false);
+  const [isSigningIn, setIsSigningIn] = useState13(false);
+  const [accessError, setAccessError] = useState13(null);
+  const [isCheckingAccess, setIsCheckingAccess] = useState13(false);
   const eventServiceContext = useContext2(EventServiceContext);
   const eventService = eventServiceContext?.eventService || null;
   useEffect9(() => {
@@ -3676,8 +4007,9 @@ var PaceLoginPage = ({
           setIsCheckingAccess(false);
           return;
         }
-        const { data: orgData } = await supabase.from("rbac_organisation_roles").select("organisation_id").eq("user_id", userId).eq("status", "active").is("revoked_at", null).limit(1).single();
-        if (!orgData) {
+        const { data: orgRow } = await supabase.from("rbac_organisation_roles").select("organisation_id").eq("user_id", userId).eq("status", "active").is("revoked_at", null).limit(1).maybeSingle();
+        const organisationId = orgRow?.organisation_id;
+        if (!organisationId) {
           logger.debug("PaceLoginPage", "User has no organisation access");
           setAccessError(`You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.`);
           setIsCheckingAccess(false);
@@ -3689,7 +4021,7 @@ var PaceLoginPage = ({
             p_user_id: userId,
             p_permission: `read:page.${page.page_name}`,
             // Permission format: operation:resource
-            p_organisation_id: orgData.organisation_id,
+            p_organisation_id: organisationId,
             p_event_id: null,
             p_app_id: appData.id,
             p_page_id: page.page_name
@@ -3737,7 +4069,7 @@ var PaceLoginPage = ({
       setIsSigningIn(false);
     }
   };
-  return /* @__PURE__ */ jsxs15("main", { className: "min-h-screen grid mx-auto w-fit content-center justify-items-center gap-y-8", "aria-label": `${appName} Login Page`, children: [
+  return /* @__PURE__ */ jsxs16("main", { className: "min-h-screen grid mx-auto w-fit content-center justify-items-center gap-y-8", "aria-label": `${appName} Login Page`, children: [
     /* @__PURE__ */ jsx21(
       "img",
       {
@@ -3768,12 +4100,12 @@ var PaceLoginPage = ({
 };
 
 // src/components/SessionRestorationLoader/SessionRestorationLoader.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var SessionRestorationLoader = ({
   message = "Restoring session...",
   className
 }) => {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
@@ -3792,9 +4124,9 @@ var SessionRestorationLoader = ({
 };
 
 // src/components/ProtectedRoute/ProtectedRoute.tsx
-import { useMemo as useMemo8, useEffect as useEffect10, useRef as useRef7, useState as useState13 } from "react";
+import { useMemo as useMemo10, useEffect as useEffect10, useRef as useRef8, useState as useState14 } from "react";
 import { Navigate, Outlet as Outlet2 } from "react-router-dom";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function ProtectedRoute({
   requireEvent = false,
   allowSuperAdminBypass = false,
@@ -3809,9 +4141,9 @@ function ProtectedRoute({
   const eventLoading = requireEvent ? eventsContext.isLoading || false : false;
   const sessionRestoration = useSessionRestoration();
   usePreventTabReload({ enabled: true, gracePeriodMs: 2e3 });
-  const wasAuthenticatedRef = useRef7(false);
-  const [shouldRedirect, setShouldRedirect] = useState13(false);
-  const tabJustBecameVisibleRef = useRef7(false);
+  const wasAuthenticatedRef = useRef8(false);
+  const [shouldRedirect, setShouldRedirect] = useState14(false);
+  const tabJustBecameVisibleRef = useRef8(false);
   useEffect10(() => {
     if (isAuthenticated) {
       wasAuthenticatedRef.current = true;
@@ -3869,7 +4201,7 @@ function ProtectedRoute({
       tabJustBecameVisibleRef.current = false;
     }
   }, [isAuthenticated]);
-  const isRestoringSession = useMemo8(() => {
+  const isRestoringSession = useMemo10(() => {
     return sessionRestoration.isRestoring && !sessionRestoration.restorationComplete && !sessionRestoration.restorationError && !sessionRestoration.hasTimedOut;
   }, [
     sessionRestoration.isRestoring,
@@ -3913,7 +4245,7 @@ function ProtectedRoute({
     return /* @__PURE__ */ jsx23(Outlet2, {});
   }
   if (!events || events.length === 0) {
-    return noEventsFallback || /* @__PURE__ */ jsx23("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", padding: "2rem" }, children: /* @__PURE__ */ jsxs17(Alert, { variant: "destructive", className: "max-w-md", children: [
+    return noEventsFallback || /* @__PURE__ */ jsx23("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", padding: "2rem" }, children: /* @__PURE__ */ jsxs18(Alert, { variant: "destructive", className: "max-w-md", children: [
       /* @__PURE__ */ jsx23(AlertTitle, { children: "No Events Available" }),
       /* @__PURE__ */ jsx23(AlertDescription, { children: "You don't have access to any events. Please contact your administrator if you believe this is an error." })
     ] }) });
@@ -3926,13 +4258,14 @@ function ProtectedRoute({
 }
 
 // src/components/FileUpload/FileUpload.tsx
-import { useState as useState14, useCallback as useCallback10, useRef as useRef8, useEffect as useEffect11, useMemo as useMemo9 } from "react";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState15, useCallback as useCallback11, useRef as useRef9, useEffect as useEffect11, useMemo as useMemo11 } from "react";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 function FileUpload({
   supabase,
   table_name,
   record_id,
   organisation_id,
+  userId,
   app_id,
   category,
   folder,
@@ -3952,12 +4285,12 @@ function FileUpload({
   onProgress,
   children
 }) {
-  const [isDragging, setIsDragging] = useState14(false);
-  const [uploadStates, setUploadStates] = useState14(/* @__PURE__ */ new Map());
-  const [resolvedAppId, setResolvedAppId] = useState14(app_id || null);
-  const [isResolvingAppId, setIsResolvingAppId] = useState14(!app_id);
-  const [appIdError, setAppIdError] = useState14(null);
-  const fileInputRef = useRef8(null);
+  const [isDragging, setIsDragging] = useState15(false);
+  const [uploadStates, setUploadStates] = useState15(/* @__PURE__ */ new Map());
+  const [resolvedAppId, setResolvedAppId] = useState15(app_id || null);
+  const [isResolvingAppId, setIsResolvingAppId] = useState15(!app_id);
+  const [appIdError, setAppIdError] = useState15(null);
+  const fileInputRef = useRef9(null);
   const { uploadFile, isLoading, error } = useFileReference(supabase);
   useEffect11(() => {
     if (app_id) {
@@ -3994,15 +4327,15 @@ function FileUpload({
     };
     resolveAppId();
   }, [app_id, supabase]);
-  const isUploading = useMemo9(() => {
+  const isUploading = useMemo11(() => {
     return uploadStates.size > 0 && Array.from(uploadStates.values()).some(
       (state) => state.progress.status === "uploading" || state.progress.status === "processing"
     );
   }, [uploadStates]);
-  const isDisabled = useMemo9(() => {
+  const isDisabled = useMemo11(() => {
     return disabled || isUploading || isResolvingAppId || !resolvedAppId;
   }, [disabled, isUploading, isResolvingAppId, resolvedAppId]);
-  const generatePreview = useCallback10((file) => {
+  const generatePreview = useCallback11((file) => {
     return new Promise((resolve) => {
       if (!file.type.startsWith("image/")) {
         resolve(null);
@@ -4016,7 +4349,7 @@ function FileUpload({
       reader.readAsDataURL(file);
     });
   }, []);
-  const validateFile = useCallback10((file) => {
+  const validateFile = useCallback11((file) => {
     if (file.size > maxSize) {
       return `File "${file.name}" exceeds maximum size of ${Math.round(maxSize / 1024 / 1024)}MB`;
     }
@@ -4040,7 +4373,7 @@ function FileUpload({
     }
     return null;
   }, [accept, maxSize]);
-  const handleFileSelect = useCallback10(async (files) => {
+  const handleFileSelect = useCallback11(async (files) => {
     if (!files || files.length === 0) return;
     const fileArray = Array.from(files);
     const validationErrors = [];
@@ -4122,7 +4455,9 @@ function FileUpload({
         const result = await uploadFile({
           table_name,
           record_id,
-          organisation_id,
+          organisation_id: organisation_id || null,
+          userId,
+          // Pass userId prop directly - it's required for user-scoped files when organisation_id is null
           app_id: resolvedAppId ? assertAppId(resolvedAppId) : assertAppId(""),
           category,
           folder,
@@ -4215,19 +4550,19 @@ function FileUpload({
       }
     }
   }, [uploadFile, table_name, record_id, organisation_id, resolvedAppId, category, folder, isPublic, maxSize, onUploadSuccess, onUploadError, onProgress, validateFile, generatePreview, showPreview, appIdError]);
-  const handleDragOver = useCallback10((e) => {
+  const handleDragOver = useCallback11((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (!isDisabled) {
       setIsDragging(true);
     }
   }, [isDisabled]);
-  const handleDragLeave = useCallback10((e) => {
+  const handleDragLeave = useCallback11((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const handleDrop = useCallback10((e) => {
+  const handleDrop = useCallback11((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
@@ -4235,13 +4570,13 @@ function FileUpload({
     const files = e.dataTransfer.files;
     handleFileSelect(files);
   }, [isDisabled, handleFileSelect]);
-  const handleFileInputChange = useCallback10((e) => {
+  const handleFileInputChange = useCallback11((e) => {
     handleFileSelect(e.target.files);
     if (e.target) {
       e.target.value = "";
     }
   }, [handleFileSelect]);
-  const handleClick = useCallback10(() => {
+  const handleClick = useCallback11(() => {
     if (!isDisabled && fileInputRef.current) {
       fileInputRef.current.click();
     }
@@ -4255,8 +4590,8 @@ 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__ */ jsxs18("div", { className: `space-y-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19("div", { className: `space-y-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs19(
       "div",
       {
         role: "button",
@@ -4275,7 +4610,7 @@ function FileUpload({
           }
         } : void 0,
         children: [
-          children || /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
+          children || /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx24(
               "input",
               {
@@ -4289,12 +4624,12 @@ function FileUpload({
                 "data-testid": "file-input"
               }
             ),
-            /* @__PURE__ */ jsx24("div", { className: "text-sec-600", children: isResolvingAppId ? "Resolving app configuration..." : isDragging ? "Drop files here..." : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsx24("div", { className: "text-sec-600", children: isResolvingAppId ? "Resolving app configuration..." : isDragging ? "Drop files here..." : /* @__PURE__ */ jsxs19(Fragment8, { children: [
               /* @__PURE__ */ jsx24("span", { className: "font-medium", children: "Click to upload" }),
               " ",
               "or drag and drop"
             ] }) }),
-            /* @__PURE__ */ jsxs18("div", { className: "text-sm text-sec-500", children: [
+            /* @__PURE__ */ jsxs19("div", { 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"
@@ -4307,7 +4642,7 @@ function FileUpload({
               role: "status",
               "aria-live": "polite",
               "aria-label": "Uploading file",
-              children: /* @__PURE__ */ jsx24("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-main-500", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx24("div", { className: "animate-spin rounded-full size-8 border-b-2 border-main-500", "aria-hidden": "true" })
             }
           )
         ]
@@ -4318,7 +4653,7 @@ function FileUpload({
       const isError = progress.status === "error";
       const isCompleted = progress.status === "completed";
       const isUploading2 = progress.status === "uploading" || progress.status === "processing";
-      return /* @__PURE__ */ jsxs18(
+      return /* @__PURE__ */ jsxs19(
         "div",
         {
           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"}`,
@@ -4331,14 +4666,14 @@ function FileUpload({
                 className: "w-12 h-12 object-cover rounded"
               }
             ) : /* @__PURE__ */ jsx24("div", { className: "w-12 h-12 flex items-center justify-center bg-sec-200 rounded", children: /* @__PURE__ */ jsx24("span", { className: "text-2xl", children: "\u{1F4C4}" }) }) }),
-            /* @__PURE__ */ jsxs18("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs19("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx24("div", { className: "font-medium text-sec-900 truncate", children: file.name }),
-              /* @__PURE__ */ jsxs18("div", { className: "text-sm text-sec-500", children: [
+              /* @__PURE__ */ jsxs19("div", { className: "text-sm text-sec-500", children: [
                 formatFileSize(file.size),
                 isCompleted && result && " \u2022 Uploaded",
                 isError && progress.error && ` \u2022 ${progress.error}`
               ] }),
-              showProgress && (isUploading2 || isError) && /* @__PURE__ */ jsxs18("div", { className: "mt-2", children: [
+              showProgress && (isUploading2 || isError) && /* @__PURE__ */ jsxs19("div", { className: "mt-2", children: [
                 /* @__PURE__ */ jsx24("div", { className: "w-full bg-sec-200 rounded-full h-2", children: /* @__PURE__ */ jsx24(
                   "div",
                   {
@@ -4346,7 +4681,7 @@ function FileUpload({
                     style: { width: `${progress.percentage}%` }
                   }
                 ) }),
-                isUploading2 && /* @__PURE__ */ jsxs18("div", { className: "text-xs text-sec-500 mt-1", children: [
+                isUploading2 && /* @__PURE__ */ jsxs19("div", { className: "text-xs text-sec-500 mt-1", children: [
                   progress.percentage,
                   "% \u2022 ",
                   formatFileSize(progress.loaded),
@@ -4355,13 +4690,13 @@ function FileUpload({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs18("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ jsxs19("div", { className: "flex-shrink-0", children: [
               isCompleted && /* @__PURE__ */ jsx24("span", { className: "text-success-500 text-xl", children: "\u2713" }),
               isError && /* @__PURE__ */ jsx24("span", { className: "text-acc-500 text-xl", children: "\u2715" }),
               isUploading2 && /* @__PURE__ */ jsx24(
                 "div",
                 {
-                  className: "animate-spin rounded-full h-5 w-5 border-b-2 border-main-500",
+                  className: "animate-spin rounded-full size-5 border-b-2 border-main-500",
                   role: "status",
                   "aria-label": "Uploading",
                   "aria-hidden": "true"
@@ -4473,7 +4808,7 @@ var TableCaption = React21.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/PublicLayout/PublicPageLayout.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function PublicPageHeader({
   event,
   eventCode,
@@ -4486,7 +4821,7 @@ function PublicPageHeader({
   customEventLogo
 }) {
   const { appName } = useAppConfig();
-  return /* @__PURE__ */ jsxs19("header", { className: cn(
+  return /* @__PURE__ */ jsxs20("header", { className: cn(
     "w-full px-[max(0rem,calc((100vw-var(--app-width))/2-0.5rem))] grid grid-cols-[auto_1fr_auto] place-items-center gap-2",
     className
   ), children: [
@@ -4498,9 +4833,9 @@ function PublicPageHeader({
         alt: appName
       }
     ),
-    event && /* @__PURE__ */ jsxs19(Fragment7, { children: [
+    event && /* @__PURE__ */ jsxs20(Fragment9, { children: [
       /* @__PURE__ */ jsx26("h1", { children: event.event_name }),
-      showEventLogo && event && /* @__PURE__ */ jsx26(Fragment7, { children: customEventLogo || /* @__PURE__ */ jsx26(
+      showEventLogo && event && /* @__PURE__ */ jsx26(Fragment9, { children: customEventLogo || /* @__PURE__ */ jsx26(
         FileDisplay,
         {
           table_name: "event",
@@ -4519,11 +4854,11 @@ function PublicPageHeader({
       ) }),
       event.event_venue && /* @__PURE__ */ jsx26("h4", { children: event.event_venue })
     ] }),
-    title && /* @__PURE__ */ jsxs19(Fragment7, { children: [
+    title && /* @__PURE__ */ jsxs20(Fragment9, { children: [
       /* @__PURE__ */ jsx26("h1", { children: title }),
       description && /* @__PURE__ */ jsx26("p", { className: "text-lg text-sec-600 max-w-3xl mx-auto", children: description })
     ] }),
-    children && /* @__PURE__ */ jsx26(Fragment7, { children })
+    children && /* @__PURE__ */ jsx26(Fragment9, { children })
   ] });
 }
 function PublicPageFooter({
@@ -4537,9 +4872,9 @@ function PublicPageFooter({
   children
 }) {
   const copyrightText = copyright || `\xA9 Copyright 2022\u2013${year} all rights reserved, ${companyName}.`;
-  return /* @__PURE__ */ jsx26("footer", { className: cn("mt-8 py-6 flex justify-center", className), children: /* @__PURE__ */ jsxs19("section", { className: "px-4 w-[min(var(--app-width),100%)] mx-auto text-center", children: [
+  return /* @__PURE__ */ jsx26("footer", { className: cn("mt-8 py-6 flex justify-center", className), children: /* @__PURE__ */ jsxs20("section", { className: "px-4 w-[min(var(--app-width),100%)] mx-auto text-center", children: [
     logo && /* @__PURE__ */ jsx26("img", { src: logo, alt: "Logo", className: "h-8 w-auto" }),
-    children && /* @__PURE__ */ jsx26(Fragment7, { children }),
+    children && /* @__PURE__ */ jsx26(Fragment9, { children }),
     /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", children: copyrightText }),
     links && links.length > 0 && /* @__PURE__ */ jsx26("ul", { className: "flex gap-4 mt-2 md:mt-0", children: links.map((link, index) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26("a", { href: link.href, className: "text-muted-foreground hover:text-foreground", children: link.label }) }, index)) })
   ] }) });
@@ -4567,7 +4902,7 @@ function PublicPageLayout({
     if (LoadingFallback) {
       return /* @__PURE__ */ jsx26(LoadingFallback, {});
     }
-    return /* @__PURE__ */ jsx26("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsxs19("div", { className: "max-w-md mx-auto text-center px-4", children: [
+    return /* @__PURE__ */ jsx26("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsxs20("div", { className: "max-w-md mx-auto text-center px-4", children: [
       /* @__PURE__ */ jsx26(LoadingSpinner, { size: "lg", className: "mx-auto mb-4" }),
       loadingMessage && /* @__PURE__ */ jsx26("p", { className: "text-sec-600", children: loadingMessage })
     ] }) });
@@ -4576,9 +4911,9 @@ function PublicPageLayout({
     if (ErrorFallback) {
       return /* @__PURE__ */ jsx26(ErrorFallback, { error, retry: handleRefetch });
     }
-    return /* @__PURE__ */ jsxs19("main", { className: "flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8", children: [
+    return /* @__PURE__ */ jsxs20("main", { className: "flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8", children: [
       /* @__PURE__ */ jsx26("h1", { children: "Event Not Found" }),
-      /* @__PURE__ */ jsxs19("p", { children: [
+      /* @__PURE__ */ jsxs20("p", { children: [
         'The event code "',
         eventCode,
         '" is invalid or the event is not available for public viewing.'
@@ -4587,13 +4922,13 @@ function PublicPageLayout({
     ] });
   }
   if (!event && showValidationErrors) {
-    return /* @__PURE__ */ jsxs19("main", { className: "flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8", children: [
+    return /* @__PURE__ */ jsxs20("main", { className: "flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8", children: [
       /* @__PURE__ */ jsx26("h1", { children: "Event Not Available" }),
       /* @__PURE__ */ jsx26("p", { children: "This event is not available for public viewing." }),
       handleRefetch && /* @__PURE__ */ jsx26(Button, { onClick: handleRefetch, children: "Try Again" })
     ] });
   }
-  return /* @__PURE__ */ jsx26(ErrorBoundary, { componentName: "PublicPageLayout", children: /* @__PURE__ */ jsxs19(Fragment7, { children: [
+  return /* @__PURE__ */ jsx26(ErrorBoundary, { componentName: "PublicPageLayout", children: /* @__PURE__ */ jsxs20(Fragment9, { children: [
     customHeader || /* @__PURE__ */ jsx26(
       PublicPageHeader,
       {
@@ -4658,4 +4993,4 @@ export {
   PublicPageFooter,
   PublicPageLayout
 };
-//# sourceMappingURL=chunk-YGPFYGA6.js.map
+//# sourceMappingURL=chunk-VKB2CO4Z.js.map