Implement share and export components

app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.container.tsx

@@ -2,12 +2,14 @@
 
 import { memo } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { CreateFlowTopNavView } from "./CreateFlowTopNav.view";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
 
 /**
  * Figma: Utility / CreateFlowTopNav — wizard header (create-flow chrome).
  * Exit, optional share / export / edit; strings in `messages/en/create/topNav.json`.
+ * Export menu: Community Rule System — node 21998:22612 (`messages/en/modals/popoverExport.json`).
  */
 const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
   ({
@@ -16,13 +18,14 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
     hasEdit = false,
     saveDraftOnExit = false,
     onShare,
-    onExport,
+    onSelectExportFormat,
     onEdit,
     onExit,
     buttonPalette,
     className = "",
   }) => {
     const router = useRouter();
+    const tPopover = useTranslation("modals.popoverExport");
 
     const handleExit = (options?: { saveDraft?: boolean }) => {
       if (onExit) {
@@ -40,11 +43,15 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
         hasEdit={hasEdit}
         saveDraftOnExit={saveDraftOnExit}
         onShare={onShare}
-        onExport={onExport}
+        onSelectExportFormat={onSelectExportFormat}
         onEdit={onEdit}
         onExit={handleExit}
         buttonPalette={buttonPalette}
         className={className}
+        exportPopoverMenuAriaLabel={tPopover("menuAriaLabel")}
+        exportPopoverPdfLabel={tPopover("downloadPdf")}
+        exportPopoverCsvLabel={tPopover("downloadCsv")}
+        exportPopoverMarkdownLabel={tPopover("downloadMarkdown")}
       />
     );
   },