@iblai/iblai-js 2.2.10 → 2.3.1

package/dist/web-containers/source/index.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import React__default, { useRef, useEffect, useState, useCallback, useLayoutEffect, forwardRef, createElement as createElement$1, createContext, useContext, useMemo, useReducer, useImperativeHandle, isValidElement, Children, PureComponent, cloneElement, Component, useId as useId$2, useDebugValue, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectSessionId, selectActiveChatMessages, useCachedSessionId, chatActions, LOCAL_STORAGE_KEYS, TimeTracker, getInitials, useTenantMetadata, WithPermissions, useStripeUpgrade, openExternalUrl, CHAT_AREA_SIZE, isAlphaNumeric32, checkRbacPermission, getTimeAgo, REQUIRED_ACTIONS_FOR_GROUPS, formatRelativeTime as formatRelativeTime$2, ANONYMOUS_USERNAME, combineCSVData, redirectToAuthSpaJoinTenant, redirectToAuthSpa, getAuthSpaJoinUrl, useOS, selectNumberOfActiveChatMessages, useUsername, selectStreaming, isLoggedIn, TOOLS, hasRemoteAiConfig, isSafariBrowser, useShowAttachment, useShowVoiceCall, useShowVoiceRecorder, useMentorSettings, selectShowingSharedChat, selectRbacPermissions, useShowFreeTrialDialog, useEmbedMode, chatInputSliceSelectors, useResponsive, useAccessingPublicRoute, useVisitingTenant, useModelFileUploadCapabilities, useChatFileUpload, useVoiceChat, selectAttachedFiles, MENTOR_CHAT_DOCUMENTS_EXTENSIONS, chatInputSliceActions, removeFile, WithFormPermissions, MENTOR_VISIBILITY } from '@iblai/web-utils';
+import { selectSessionId, selectActiveChatMessages, useCachedSessionId, chatActions, LOCAL_STORAGE_KEYS, TimeTracker, getInitials, useTenantMetadata, WithPermissions, canWriteField, useStripeUpgrade, openExternalUrl, CHAT_AREA_SIZE, isAlphaNumeric32, checkRbacPermission, getTimeAgo, REQUIRED_ACTIONS_FOR_GROUPS, formatRelativeTime as formatRelativeTime$2, ANONYMOUS_USERNAME, combineCSVData, redirectToAuthSpaJoinTenant, redirectToAuthSpa, getAuthSpaJoinUrl, useOS, selectNumberOfActiveChatMessages, useUsername, selectStreaming, isLoggedIn, TOOLS, hasRemoteAiConfig, isSafariBrowser, useShowAttachment, useShowVoiceCall, useShowVoiceRecorder, useMentorSettings, selectShowingSharedChat, selectRbacPermissions, useShowFreeTrialDialog, useEmbedMode, chatInputSliceSelectors, useResponsive, useAccessingPublicRoute, useVisitingTenant, useModelFileUploadCapabilities, useChatFileUpload, useVoiceChat, selectAttachedFiles, MENTOR_CHAT_DOCUMENTS_EXTENSIONS, chatInputSliceActions, removeFile, WithFormPermissions, MENTOR_VISIBILITY } from '@iblai/web-utils';
 import * as dataLayer from '@iblai/data-layer';
-import { useCreateSessionIdMutation, useTimeTrackingMutation, useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useSelfRetireMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useGetMySubscriptionsQuery, useGetItemSubscriptionQuery, useCancelSubscriptionMutation, useGetLearnerDetailsQuery, useGetUserEnrolledCoursesQuery, useGetUserEnrolledProgramsQuery, useGetUserCatalogPathwaysQuery, useGetUsersAsAssertionsQuery, useGetUserEarnedSkillsQuery, useGetUserReportedSkillsQuery, useGetUserDesiredSkillsQuery, useCreateGlobalMemoryMutation, useGetMemsearchStatusQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useDeleteGlobalMemoryMutation, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useUpdateUserRoleMutation, useUpdateUserStatusMutation, useUpdatePlatformUserRoleWithPoliciesMutation, usePlatformUsersQuery, isPoliciesResponse, platformApiSlice, featureTags, useLazyGetRbacTeamsAccessListQuery, useCreateRbacTeamsAccessMutation, useGetRbacGroupsQuery, usePlatformUserGroupsQuery, useCreateRbacGroupMutation, useUpdateRbacGroupMutation, useDeleteRbacGroupMutation, useCreatePlatformUserGroupMutation, useUpdatePlatformUserGroupMutation, useDeletePlatformUserGroupMutation, useGetRbacGroupDetailsQuery, useGetPlatformUserGroupDetailsQuery, useGetRbacPermissionsMutation, useGetRbacRolesQuery, useCreateRbacRoleMutation, useUpdateRbacRoleMutation, useDeleteRbacRoleMutation, useGetRbacRoleDetailsQuery, useGetRbacActionsDefinitionQuery, useGetRbacResourceDiscoveryQuery, useGetRbacResourceListQuery, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useGetWatchedGroupsQuery, useCreateWatchedGroupMutation, useUpdateWatchedGroupMutation, useDeleteWatchedGroupMutation, useAddWatchedUserMutation, useRemoveWatchedUserMutation, useAddWatcherMutation, useUpdateWatcherMutation, useDeleteWatcherMutation, useGetWatchedUsersQuery, useGetWatchersQuery, WATCHER_NOTIFICATION_EVENTS, WATCHER_NOTIFICATION_EVENT_LABELS, useGetApplicationFormsQuery, useGetApplicationFormDetailQuery, useCreateApplicationFormMutation, useUpdateApplicationFormMutation, useGetApplicationAdminDetailQuery, useInviteApplicationCandidateMutation, useLazyGetApplicationAttachmentFileQuery, useCreateApplicationWaiverMutation, useDeleteApplicationWaiverMutation, useSubmitApplicationOverrideMutation, useUpdateApplicationPlacementMutation, useDeleteApplicationCourseAssignmentMutation, useCreateApplicationNoteMutation, useUpdateApplicationNoteMutation, useDeleteApplicationNoteMutation, useTransitionApplicationMutation, useLinkApplicationCandidateMutation, useCreateApplicationPlacementsMutation, useGetCustomMentorsQuery, useCreateApplicationCourseAssignmentsMutation, useGetApplicationBlocksQuery, useDeleteApplicationBlockMutation, useGetApplicationsPipelineStatsQuery, useGetApplicationsPipelineQuery, useDeleteApiKeyMutation, useGetApiKeysQuery, useCreateApiKeyMutation, useCreateLLMCredentialMutation, useGetCredentialsSchemaQuery, useGetMaskedLLMCredentialsQuery, useGetLlmsQuery, useDeleteIntegrationCredentialMutation, useDeleteCredentialMutation, useCreateIntegrationCredentialMutation, useGetIntegrationCredentialsSchemaQuery, useGetMaskedIntegrationCredentialsQuery, useGetAccountBillingInfoQuery, useUpdateAutoRechargeInfoMutation, useTriggerAutoRechargeMutation, useCreateStripeCustomerPortalMutation, useSetPlatformConfigurationsMutation, useGetPlatformConfigurationsQuery, useUpdatePlatformMembershipMutation, useGetPlatformMembershipQuery, useGetCustomDomainsQuery, useCreateCustomDomainMutation, useDeleteCustomDomainMutation, useGetStudentMentorCreationStatusQuery, useSetStudentMentorCreationStatusMutation, coreApiSlice, recommendationPromptTypeEnum, useGetRecommendedPromptsListQuery, useCreateRecommendedPromptMutation, useUpdateRecommendedPromptMutation, useDeleteRecommendedPromptMutation, useLazyGetPublicPlatformImageAssetFileUrlQuery, useUpdateTenantMetadataMutation, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useGetAiSearchMentorsQuery, useListPaywallsQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useUpdatePaywallMutation, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportDetailQuery, useLazyGetDownloadReportFromURLQuery, useGetMentorPublicSettingsQuery, useGetReportsQuery, useCreateReportMutation, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery, useGetRevenueQuery, useListSubscribersQuery, useGetAuditLogsQuery, useLazyGetCourseMetaDataQuery, useLazyGetCourseCompletionOutlinesQuery, useLazyGetCourseEligibilityQuery, useLazyGetUserEnrolledCoursesQuery, useLazyGetUserAssignedCoursesQuery, useLazyGetUserCredentialsQuery, useLazyGetOverTimeActivityQuery, useLazyGetCatalogSearchQuery, useCreateOrUpdateUserReportedSkillMutation, useCreateOrUpdateUserDesiredSkillMutation, useLazyGetPathwayListQuery, useLazyGetUserAssignedPathwaysQuery, useLazyGetUserEnrolledPathwaysQuery, useLazyGetPathwayCompletionQuery, useLazyGetProgramListQuery, useLazyGetProgramCompletionQuery, useLazyGetUserEnrolledProgramsQuery, useLazyGetAssignedProgramsQuery, useLazyGetUserSkillsPointsQuery, useLazyGetUserReportedSkillsQuery, useLazyGetUserDesiredSkillsQuery, useLazyGetUserCatalogPathwaysQuery, useLazyGetPerLearnerInfoQuery, useLazyGetEdxSSOTokenQuery, useCreateCourseEnrollmentMutation, useCreateStripeCheckoutSessionMutation, useLazyGetCourseProgressQuery, useLazyGetCourseCompletionQuery, useLazyGetPersonnalizedSearchQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useGetClawMentorConfigQuery, useGetClawInstancesQuery, useGetAgentConfigQuery, useUpdateClawMentorConfigMutation, useCreateClawMentorConfigMutation, useDeleteClawMentorConfigMutation, usePushClawConfigMutation, useCreateClawInstanceMutation, useDeleteClawInstanceMutation, useUpdateAgentConfigMutation, useHealthCheckClawInstanceMutation, useTestConnectivityClawInstanceMutation, useUpdateClawInstanceMutation, useGetAgentSkillResourcesQuery, useCreateAgentSkillResourceMutation, useUpdateAgentSkillResourceMutation, useUploadAgentSkillResourceAssetMutation, useDeleteAgentSkillResourceMutation, useGetAgentSkillsQuery, useGetMentorSkillAssignmentsQuery, useCreateMentorSkillAssignmentMutation, useUpdateMentorSkillAssignmentMutation, useDeleteMentorSkillAssignmentMutation, useCreateAgentSkillMutation, useUpdateAgentSkillMutation, useDeleteAgentSkillMutation, resolveEffectiveAgentSkills, filterSlashSkills, useCreateCheckoutMutation, useGetUserProjectsQuery, useUpdateUserProjectMutation, useGetTrainingDocumentsQuery, useGetVectorDocumentsQuery, useGetMentorMemoriesListQuery, useGetMemoryCategoriesAdminQuery, useDeleteMentorMemoryMutation, useUpdateMentorMemoryMutation, useCreateMentorMemoryMutation, useLazyGetConnectedServiceAuthUrlQuery, useCreateUserProjectMutation, useDeleteUserProjectMutation, useGetUserProjectDetailsQuery, useEditTrainingDocumentMutation, useAddTrainingDocumentMutation, useLazyGetCredentialsQuery, useGetMentorSettingsQuery, useEditMentorMutation, useGetMentorCategoriesQuery, useCreateMentorMutation, useUpdateUserPlatformMetadataMutation, useGetApplicationStatusQuery, useListOwnApplicationsQuery, useGetApplicationFormQuery, useWithdrawApplicationMutation, useRenewApplicationMutation, useCreateApplicationDraftMutation, useSubmitApplicationMutation, useUpdateApplicationMutation, useUploadApplicationAttachmentMutation, useDeleteApplicationAttachmentMutation, useGetPromptCategoriesQuery, useCreatePromptMutation, useDeletePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation } from '@iblai/data-layer';
+import { useCreateSessionIdMutation, useTimeTrackingMutation, useGetUserMetadataQuery, useGetUserMetadataEdxQuery, useUpdateUserMetadataMutation, useUpdateUserMetadataEdxMutation, useUploadProfileImageMutation, useResetPasswordMutation, useSelfRetireMutation, useCreateUserInstitutionMutation, useGetUserInstitutionsQuery, useCreateUserEducationMutation, useUpdateUserEducationMutation, useDeleteUserEducationMutation, useGetUserEducationQuery, useCreateUserCompanyMutation, useGetUserCompaniesQuery, useCreateUserExperienceMutation, useUpdateUserExperienceMutation, useDeleteUserExperienceMutation, useGetUserExperienceQuery, useGetUserResumeQuery, useCreateUserResumeMutation, useGetMySubscriptionsQuery, useGetItemSubscriptionQuery, useCancelSubscriptionMutation, useGetLearnerDetailsQuery, useGetUserEnrolledCoursesQuery, useGetUserEnrolledProgramsQuery, useGetUserCatalogPathwaysQuery, useGetUsersAsAssertionsQuery, useGetUserEarnedSkillsQuery, useGetUserReportedSkillsQuery, useGetUserDesiredSkillsQuery, useCreateGlobalMemoryMutation, useGetMemsearchStatusQuery, useGetUserMemorySettingsQuery, useUpdateUserMemorySettingsMutation, useGetGlobalMemoriesQuery, useDeleteGlobalMemoryMutation, useInviteUserMutation, usePlatformInvitationsQuery, useCreateCatalogInvitationCourseBulkMutation, useGetCatalogInvitationsCourseQuery, useLazyPlatformUsersQuery, useLazyPlatformUserGroupsQuery, useGetPersonnalizedSearchQuery, useCreateCatalogInvitationProgramBulkMutation, useGetCatalogInvitationsProgramQuery, useUpdateUserRoleMutation, useUpdateUserStatusMutation, useUpdatePlatformUserRoleWithPoliciesMutation, usePlatformUsersQuery, isPoliciesResponse, platformApiSlice, featureTags, useLazyGetRbacTeamsAccessListQuery, useCreateRbacTeamsAccessMutation, useGetRbacGroupsQuery, usePlatformUserGroupsQuery, useCreateRbacGroupMutation, useUpdateRbacGroupMutation, useDeleteRbacGroupMutation, useCreatePlatformUserGroupMutation, useUpdatePlatformUserGroupMutation, useDeletePlatformUserGroupMutation, useGetRbacGroupDetailsQuery, useGetPlatformUserGroupDetailsQuery, useGetRbacPermissionsMutation, useGetRbacRolesQuery, useCreateRbacRoleMutation, useUpdateRbacRoleMutation, useDeleteRbacRoleMutation, useGetRbacRoleDetailsQuery, useGetRbacActionsDefinitionQuery, useGetRbacResourceDiscoveryQuery, useGetRbacResourceListQuery, useGetRbacPoliciesQuery, useCreateRbacPolicyMutation, useUpdateRbacPolicyMutation, useDeleteRbacPolicyMutation, useGetRbacPolicyDetailsQuery, useGetWatchedGroupsQuery, useCreateWatchedGroupMutation, useUpdateWatchedGroupMutation, useDeleteWatchedGroupMutation, useAddWatchedUserMutation, useRemoveWatchedUserMutation, useAddWatcherMutation, useUpdateWatcherMutation, useDeleteWatcherMutation, useGetWatchedUsersQuery, useGetWatchersQuery, WATCHER_NOTIFICATION_EVENTS, WATCHER_NOTIFICATION_EVENT_LABELS, useGetApplicationFormsQuery, useGetApplicationFormDetailQuery, useCreateApplicationFormMutation, useUpdateApplicationFormMutation, useGetApplicationAdminDetailQuery, useInviteApplicationCandidateMutation, useLazyGetApplicationAttachmentFileQuery, useCreateApplicationWaiverMutation, useDeleteApplicationWaiverMutation, useSubmitApplicationOverrideMutation, useUpdateApplicationPlacementMutation, useDeleteApplicationCourseAssignmentMutation, useCreateApplicationNoteMutation, useUpdateApplicationNoteMutation, useDeleteApplicationNoteMutation, useTransitionApplicationMutation, useLinkApplicationCandidateMutation, useCreateApplicationPlacementsMutation, useGetCustomMentorsQuery, useCreateApplicationCourseAssignmentsMutation, useGetApplicationBlocksQuery, useDeleteApplicationBlockMutation, useGetApplicationsPipelineStatsQuery, useGetApplicationsPipelineQuery, useDeleteApiKeyMutation, useGetApiKeyQuery, useGetApiKeyFieldPermissionsQuery, useUpdateApiKeyMutation, useGetApiKeysQuery, unwrapApiTokenList, useCreateApiKeyMutation, useCreateLLMCredentialMutation, useGetCredentialsSchemaQuery, useGetMaskedLLMCredentialsQuery, useGetLlmsQuery, useDeleteIntegrationCredentialMutation, useDeleteCredentialMutation, useCreateIntegrationCredentialMutation, useGetIntegrationCredentialsSchemaQuery, useGetMaskedIntegrationCredentialsQuery, useGetAccountBillingInfoQuery, useUpdateAutoRechargeInfoMutation, useTriggerAutoRechargeMutation, useCreateStripeCustomerPortalMutation, useSetPlatformConfigurationsMutation, useGetPlatformConfigurationsQuery, useUpdatePlatformMembershipMutation, useGetPlatformMembershipQuery, useGetCustomDomainsQuery, useCreateCustomDomainMutation, useDeleteCustomDomainMutation, useGetStudentMentorCreationStatusQuery, useSetStudentMentorCreationStatusMutation, coreApiSlice, recommendationPromptTypeEnum, useGetRecommendedPromptsListQuery, useCreateRecommendedPromptMutation, useUpdateRecommendedPromptMutation, useDeleteRecommendedPromptMutation, useLazyGetPublicPlatformImageAssetFileUrlQuery, useUpdateTenantMetadataMutation, useCreatePlatformImageAssetMutation, useGetProviderConfigQuery, useCreateProviderConfigMutation, useDeleteProviderConfigMutation, useGetExternalMappingQuery, useGetCredentialsListQuery, useCreateExternalMappingMutation, useDeleteExternalMappingMutation, useGetMemsearchConfigQuery, useUpdateMemsearchConfigMutation, useGetStripeConnectStatusQuery, useStartStripeConnectOnboardingMutation, useLazyGetStripeConnectDashboardQuery, useGetAiSearchMentorsQuery, useListPaywallsQuery, useListPricesQuery, useCreatePriceMutation, useUpdatePriceMutation, useDeletePriceMutation, useGetPaywallConfigQuery, useEnablePaywallMutation, useUpdatePaywallMutation, useGetNotificationsCountQuery, useLazyGetNotificationsQuery, useMarkAllAsReadMutation, useCreateNotificationPreviewMutation, useSendNotificationMutation, useGetMentorsQuery, useUpdateTemplateMutation, useGetTemplateDetailsQuery, useGetTemplatesQuery, useLazyGetTemplateDetailsQuery, useToggleTemplateMutation, useGetTopicsStatsQuery, useGetUsersStatsQuery, useGetSessionStatsQuery, useGetTopicsDetailsStatsQuery, useGetAccessTimeHeatmapQuery, useGetUserDetailsStatsQuery, useGetTranscriptsConversationHeadlineQuery, useGetAverageRatingQuery, useGetFinancialStatsQuery, useGetDetailedFinancialStatsQuery, useGetTranscriptsMessagesDetailsQuery, useGetTranscriptsMessagesQuery, useGetReportDetailQuery, useLazyGetDownloadReportFromURLQuery, useGetMentorPublicSettingsQuery, useGetReportsQuery, useCreateReportMutation, useGetContentAnalyticsQuery, useGetContentAnalyticsDetailsQuery, useGetRevenueQuery, useListSubscribersQuery, useGetAuditLogsQuery, useLazyGetCourseMetaDataQuery, useLazyGetCourseCompletionOutlinesQuery, useLazyGetCourseEligibilityQuery, useLazyGetUserEnrolledCoursesQuery, useLazyGetUserAssignedCoursesQuery, useLazyGetUserCredentialsQuery, useLazyGetOverTimeActivityQuery, useLazyGetCatalogSearchQuery, useCreateOrUpdateUserReportedSkillMutation, useCreateOrUpdateUserDesiredSkillMutation, useLazyGetPathwayListQuery, useLazyGetUserAssignedPathwaysQuery, useLazyGetUserEnrolledPathwaysQuery, useLazyGetPathwayCompletionQuery, useLazyGetProgramListQuery, useLazyGetProgramCompletionQuery, useLazyGetUserEnrolledProgramsQuery, useLazyGetAssignedProgramsQuery, useLazyGetUserSkillsPointsQuery, useLazyGetUserReportedSkillsQuery, useLazyGetUserDesiredSkillsQuery, useLazyGetUserCatalogPathwaysQuery, useLazyGetPerLearnerInfoQuery, useLazyGetEdxSSOTokenQuery, useCreateCourseEnrollmentMutation, useCreateStripeCheckoutSessionMutation, useLazyGetCourseProgressQuery, useLazyGetCourseCompletionQuery, useLazyGetPersonnalizedSearchQuery, useUpdateExamAttemptMutation, useStartExamMutation, useLazyGetExamInfoQuery, useGetClawMentorConfigQuery, useGetClawInstancesQuery, useGetAgentConfigQuery, useUpdateClawMentorConfigMutation, useCreateClawMentorConfigMutation, useDeleteClawMentorConfigMutation, usePushClawConfigMutation, useCreateClawInstanceMutation, useDeleteClawInstanceMutation, useUpdateAgentConfigMutation, useHealthCheckClawInstanceMutation, useTestConnectivityClawInstanceMutation, useUpdateClawInstanceMutation, useGetAgentSkillResourcesQuery, useCreateAgentSkillResourceMutation, useUpdateAgentSkillResourceMutation, useUploadAgentSkillResourceAssetMutation, useDeleteAgentSkillResourceMutation, useGetAgentSkillsQuery, useGetMentorSkillAssignmentsQuery, useCreateMentorSkillAssignmentMutation, useUpdateMentorSkillAssignmentMutation, useDeleteMentorSkillAssignmentMutation, useCreateAgentSkillMutation, useUpdateAgentSkillMutation, useDeleteAgentSkillMutation, resolveEffectiveAgentSkills, filterSlashSkills, useCreateCheckoutMutation, useGetUserProjectsQuery, useUpdateUserProjectMutation, useGetTrainingDocumentsQuery, useGetVectorDocumentsQuery, useGetMentorMemoriesListQuery, useGetMemoryCategoriesAdminQuery, useDeleteMentorMemoryMutation, useUpdateMentorMemoryMutation, useCreateMentorMemoryMutation, useLazyGetConnectedServiceAuthUrlQuery, useCreateUserProjectMutation, useDeleteUserProjectMutation, useGetUserProjectDetailsQuery, useEditTrainingDocumentMutation, useAddTrainingDocumentMutation, useLazyGetCredentialsQuery, useGetMentorSettingsQuery, useEditMentorMutation, useGetMentorCategoriesQuery, useCreateMentorMutation, useUpdateUserPlatformMetadataMutation, useGetApplicationStatusQuery, useListOwnApplicationsQuery, useGetApplicationFormQuery, useWithdrawApplicationMutation, useRenewApplicationMutation, useCreateApplicationDraftMutation, useSubmitApplicationMutation, useUpdateApplicationMutation, useUploadApplicationAttachmentMutation, useDeleteApplicationAttachmentMutation, useGetPromptCategoriesQuery, useCreatePromptMutation, useDeletePromptMutation, useGetPromptsSearchQuery, useUpdatePromptMutation, useDeleteTrainingDocumentMutation, useGetTrainingDocumentRetrainScheduleQuery, useCreateTrainingDocumentRetrainScheduleMutation } from '@iblai/data-layer';
 import { toast } from 'sonner';
 import { jsx, Fragment as Fragment$1, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
@@ -254,7 +254,7 @@ function useTimeTracking(config = {}) {
         }
     }, [config.getTenantKey, config.getMentorId]);
     const handleTimeUpdate = useCallback(async (url, timeSpent) => {
-        var _a;
+        var _a, _b, _c;
         // Check if user is logged in before making time tracking API call
         if (config.storageService) {
             try {
@@ -278,6 +278,10 @@ function useTimeTracking(config = {}) {
             const currentSessionUuid = config.getSessionUuid
                 ? config.getSessionUuid()
                 : config.sessionUuid;
+            // Course/unit context is resolved per-update from the tracked URL (not
+            // cached like tenant/mentor) because it changes as the user navigates.
+            const courseId = (_a = config.getCourseId) === null || _a === void 0 ? void 0 : _a.call(config, url);
+            const blockId = (_b = config.getBlockId) === null || _b === void 0 ? void 0 : _b.call(config, url);
             const timeTrackingData = {
                 timestamp: new Date().toISOString(),
                 url: url,
@@ -285,8 +289,10 @@ function useTimeTracking(config = {}) {
                 count: Math.floor(timeSpent / 1000), // Convert milliseconds to seconds
                 ...(mentorId && { mentor_uuid: mentorId }),
                 ...(currentSessionUuid && { session_uuid: currentSessionUuid }),
+                ...(courseId && { course_id: courseId }),
+                ...(blockId && { block_id: blockId }),
             };
-            if ((_a = config.storageService) === null || _a === void 0 ? void 0 : _a.getItem(LOCAL_STORAGE_KEYS.USER_DATA)) {
+            if ((_c = config.storageService) === null || _c === void 0 ? void 0 : _c.getItem(LOCAL_STORAGE_KEYS.USER_DATA)) {
                 await timeTracking(timeTrackingData).unwrap();
             }
             else {
@@ -298,7 +304,7 @@ function useTimeTracking(config = {}) {
                 ...(currentSessionUuid && { sessionUuid: currentSessionUuid }),
             });
         }
-        catch (_b) {
+        catch (_d) {
             // console.error('Failed to send time tracking data:', error);
             // Don't throw the error to prevent disrupting the user experience
         }
@@ -307,6 +313,8 @@ function useTimeTracking(config = {}) {
         mentorId,
         config.getSessionUuid,
         config.sessionUuid,
+        config.getCourseId,
+        config.getBlockId,
         config.storageService,
         timeTracking,
     ]);
@@ -60760,6 +60768,18 @@ var apiTabDeleteApiModal2$3 = {
 	successMessage: "API Key deleted successfully",
 	errorMessage: "Failed to delete API Key"
 };
+var apiTabEditApiModal$3 = {
+	title: "Edit API Key",
+	editAriaLabel: "Edit API Key",
+	renameWarning: "The name identifies this key in the API. Renaming it changes that identifier.",
+	expirationHelp: "Clear the date to let this key never expire.",
+	save: "Save",
+	saving: "Saving...",
+	successToast: "API Key updated successfully",
+	errorToast: "Failed to update API Key",
+	loading: "Loading...",
+	loadError: "Failed to load API Key"
+};
 var apiTabLabels$3 = {
 	header: {
 		title: "API",
@@ -60770,6 +60790,7 @@ var apiTabLabels$3 = {
 		lineTwo: "Do not share your API key with others, or expose it in the browser or other client-side code. In order to protect the security of your account, IBL may also automatically rotate any API key that we’ve found has leaked publicly."
 	},
 	table: {
+		banner: "These are authentication keys that you've generated for external applications to authenticate with your service. Keys are displayed only once when generated.",
 		nameColumn: "NAME",
 		createdColumn: "CREATED",
 		expiresColumn: "EXPIRES",
@@ -60810,6 +60831,21 @@ var apiTabLabels$3 = {
 		descriptionLineTwo: "If you lose your API key, you'll need to generate a new one."
 	}
 };
+var apiTabTokenPolicies$3 = {
+	modeLabel: "Permission Mode",
+	ownerModeLabel: "Owner permissions",
+	ownerModeDescription: "The key inherits the RBAC permissions of the user who created it.",
+	tokenPoliciesModeLabel: "Token policies",
+	tokenPoliciesModeDescription: "The key resolves permissions from the policies and groups assigned below.",
+	policiesLabel: "Policies",
+	policiesPlaceholder: "Search policies...",
+	policiesHelp: "Policies assigned directly to this key.",
+	groupsLabel: "Groups",
+	groupsPlaceholder: "Search groups...",
+	groupsHelp: "Groups whose policies this key inherits.",
+	noneSelected: "None",
+	clearExpiration: "Clear expiration date"
+};
 var appSidebarIndex$3 = {
 	pinnedMessages: "Pinned Messages",
 	recentMessages: "Recent Messages"
@@ -65752,7 +65788,9 @@ var en = {
 	apiTabApiKeyModal: apiTabApiKeyModal$3,
 	apiTabCreateApiModal2: apiTabCreateApiModal2$3,
 	apiTabDeleteApiModal2: apiTabDeleteApiModal2$3,
+	apiTabEditApiModal: apiTabEditApiModal$3,
 	apiTabLabels: apiTabLabels$3,
+	apiTabTokenPolicies: apiTabTokenPolicies$3,
 	appSidebarIndex: appSidebarIndex$3,
 	appSidebarProjectItem: appSidebarProjectItem$3,
 	appSidebarProjectsSidebarDropdown: appSidebarProjectsSidebarDropdown$3,
@@ -66946,6 +66984,18 @@ var apiTabDeleteApiModal2$2 = {
 	successMessage: "Clé API supprimée avec succès",
 	errorMessage: "Échec de la suppression de la clé API"
 };
+var apiTabEditApiModal$2 = {
+	title: "Modifier la clé API",
+	editAriaLabel: "Modifier la clé API",
+	renameWarning: "Le nom identifie cette clé dans l'API. Le modifier change cet identifiant.",
+	expirationHelp: "Effacez la date pour que cette clé n'expire jamais.",
+	save: "Enregistrer",
+	saving: "Enregistrement...",
+	successToast: "Clé API mise à jour avec succès",
+	errorToast: "Échec de la mise à jour de la clé API",
+	loading: "Chargement...",
+	loadError: "Échec du chargement de la clé API"
+};
 var apiTabLabels$2 = {
 	header: {
 		title: "API",
@@ -66956,6 +67006,7 @@ var apiTabLabels$2 = {
 		lineTwo: "Ne partagez pas votre clé API avec d’autres personnes et ne l’exposez pas dans le navigateur ou dans un autre code côté client. Pour protéger la sécurité de votre compte, IBL peut également faire pivoter automatiquement toute clé API que nous avons détectée comme publiquement exposée."
 	},
 	table: {
+		banner: "Voici les clés d'authentification que vous avez générées pour permettre à des applications externes de s'authentifier auprès de votre service. Les clés ne s'affichent qu'une seule fois, lors de leur génération.",
 		nameColumn: "NOM",
 		createdColumn: "CRÉÉ",
 		expiresColumn: "EXPIRE",
@@ -66996,6 +67047,21 @@ var apiTabLabels$2 = {
 		descriptionLineTwo: "Si vous perdez votre clé API, vous devrez en générer une nouvelle."
 	}
 };
+var apiTabTokenPolicies$2 = {
+	modeLabel: "Mode de permission",
+	ownerModeLabel: "Permissions du propriétaire",
+	ownerModeDescription: "La clé hérite des permissions RBAC de l'utilisateur qui l'a créée.",
+	tokenPoliciesModeLabel: "Politiques du jeton",
+	tokenPoliciesModeDescription: "La clé résout ses permissions à partir des politiques et des groupes attribués ci-dessous.",
+	policiesLabel: "Politiques",
+	policiesPlaceholder: "Rechercher des politiques...",
+	policiesHelp: "Politiques attribuées directement à cette clé.",
+	groupsLabel: "Groupes",
+	groupsPlaceholder: "Rechercher des groupes...",
+	groupsHelp: "Groupes dont cette clé hérite des politiques.",
+	noneSelected: "Aucun",
+	clearExpiration: "Effacer la date d'expiration"
+};
 var appSidebarIndex$2 = {
 	pinnedMessages: "Messages épinglés",
 	recentMessages: "Messages récents"
@@ -71938,7 +72004,9 @@ var fr = {
 	apiTabApiKeyModal: apiTabApiKeyModal$2,
 	apiTabCreateApiModal2: apiTabCreateApiModal2$2,
 	apiTabDeleteApiModal2: apiTabDeleteApiModal2$2,
+	apiTabEditApiModal: apiTabEditApiModal$2,
 	apiTabLabels: apiTabLabels$2,
+	apiTabTokenPolicies: apiTabTokenPolicies$2,
 	appSidebarIndex: appSidebarIndex$2,
 	appSidebarProjectItem: appSidebarProjectItem$2,
 	appSidebarProjectsSidebarDropdown: appSidebarProjectsSidebarDropdown$2,
@@ -73132,6 +73200,18 @@ var apiTabDeleteApiModal2$1 = {
 	successMessage: "Clave API eliminada correctamente",
 	errorMessage: "Error al eliminar la clave API"
 };
+var apiTabEditApiModal$1 = {
+	title: "Editar clave API",
+	editAriaLabel: "Editar clave API",
+	renameWarning: "El nombre identifica esta clave en la API. Cambiarlo modifica ese identificador.",
+	expirationHelp: "Borra la fecha para que esta clave nunca caduque.",
+	save: "Guardar",
+	saving: "Guardando...",
+	successToast: "Clave API actualizada correctamente",
+	errorToast: "No se pudo actualizar la clave API",
+	loading: "Cargando...",
+	loadError: "No se pudo cargar la clave API"
+};
 var apiTabLabels$1 = {
 	header: {
 		title: "API",
@@ -73142,6 +73222,7 @@ var apiTabLabels$1 = {
 		lineTwo: "No comparta su clave API con otros ni la exponga en el navegador u otro código del lado del cliente. Para proteger la seguridad de su cuenta, IBL también puede rotar automáticamente cualquier clave API que hayamos detectado que se ha filtrado públicamente."
 	},
 	table: {
+		banner: "Estas son las claves de autenticación que has generado para que aplicaciones externas se autentiquen con tu servicio. Las claves solo se muestran una vez, al generarlas.",
 		nameColumn: "NOMBRE",
 		createdColumn: "CREADO",
 		expiresColumn: "EXPIRA",
@@ -73182,6 +73263,21 @@ var apiTabLabels$1 = {
 		descriptionLineTwo: "Si pierde su clave API, deberá generar una nueva."
 	}
 };
+var apiTabTokenPolicies$1 = {
+	modeLabel: "Modo de permisos",
+	ownerModeLabel: "Permisos del propietario",
+	ownerModeDescription: "La clave hereda los permisos RBAC del usuario que la creó.",
+	tokenPoliciesModeLabel: "Políticas del token",
+	tokenPoliciesModeDescription: "La clave resuelve sus permisos a partir de las políticas y los grupos asignados a continuación.",
+	policiesLabel: "Políticas",
+	policiesPlaceholder: "Buscar políticas...",
+	policiesHelp: "Políticas asignadas directamente a esta clave.",
+	groupsLabel: "Grupos",
+	groupsPlaceholder: "Buscar grupos...",
+	groupsHelp: "Grupos cuyas políticas hereda esta clave.",
+	noneSelected: "Ninguno",
+	clearExpiration: "Borrar la fecha de caducidad"
+};
 var appSidebarIndex$1 = {
 	pinnedMessages: "Mensajes anclados",
 	recentMessages: "Mensajes recientes"
@@ -78124,7 +78220,9 @@ var es = {
 	apiTabApiKeyModal: apiTabApiKeyModal$1,
 	apiTabCreateApiModal2: apiTabCreateApiModal2$1,
 	apiTabDeleteApiModal2: apiTabDeleteApiModal2$1,
+	apiTabEditApiModal: apiTabEditApiModal$1,
 	apiTabLabels: apiTabLabels$1,
+	apiTabTokenPolicies: apiTabTokenPolicies$1,
 	appSidebarIndex: appSidebarIndex$1,
 	appSidebarProjectItem: appSidebarProjectItem$1,
 	appSidebarProjectsSidebarDropdown: appSidebarProjectsSidebarDropdown$1,
@@ -79318,6 +79416,18 @@ var apiTabDeleteApiModal2 = {
 	successMessage: "API 密钥已成功删除",
 	errorMessage: "删除 API 密钥失败"
 };
+var apiTabEditApiModal = {
+	title: "编辑 API 密钥",
+	editAriaLabel: "编辑 API 密钥",
+	renameWarning: "名称是此密钥在 API 中的标识，修改名称会更改该标识。",
+	expirationHelp: "清除日期可让此密钥永不过期。",
+	save: "保存",
+	saving: "保存中...",
+	successToast: "API 密钥更新成功",
+	errorToast: "更新 API 密钥失败",
+	loading: "加载中...",
+	loadError: "加载 API 密钥失败"
+};
 var apiTabLabels = {
 	header: {
 		title: "API",
@@ -79328,6 +79438,7 @@ var apiTabLabels = {
 		lineTwo: "请勿将您的 API 密钥共享给他人，也勿将其暴露在浏览器或其他客户端代码中。为了保护您账户的安全，IBL 也可能会自动轮换我们发现已公开泄露的任何 API 密钥。"
 	},
 	table: {
+		banner: "以下是您为外部应用程序生成的身份验证密钥，用于向您的服务进行身份验证。密钥仅在生成时显示一次。",
 		nameColumn: "名称",
 		createdColumn: "创建时间",
 		expiresColumn: "过期时间",
@@ -79368,6 +79479,21 @@ var apiTabLabels = {
 		descriptionLineTwo: "如果您丢失了 API 密钥，将需要重新生成一个新的。"
 	}
 };
+var apiTabTokenPolicies = {
+	modeLabel: "权限模式",
+	ownerModeLabel: "所有者权限",
+	ownerModeDescription: "此密钥继承创建者的 RBAC 权限。",
+	tokenPoliciesModeLabel: "令牌策略",
+	tokenPoliciesModeDescription: "此密钥根据下方分配的策略和群组解析权限。",
+	policiesLabel: "策略",
+	policiesPlaceholder: "搜索策略...",
+	policiesHelp: "直接分配给此密钥的策略。",
+	groupsLabel: "群组",
+	groupsPlaceholder: "搜索群组...",
+	groupsHelp: "此密钥继承其策略的群组。",
+	noneSelected: "无",
+	clearExpiration: "清除过期日期"
+};
 var appSidebarIndex = {
 	pinnedMessages: "已固定的消息",
 	recentMessages: "最近消息"
@@ -84310,7 +84436,9 @@ var zh = {
 	apiTabApiKeyModal: apiTabApiKeyModal,
 	apiTabCreateApiModal2: apiTabCreateApiModal2,
 	apiTabDeleteApiModal2: apiTabDeleteApiModal2,
+	apiTabEditApiModal: apiTabEditApiModal,
 	apiTabLabels: apiTabLabels,
+	apiTabTokenPolicies: apiTabTokenPolicies,
 	appSidebarIndex: appSidebarIndex,
 	appSidebarProjectItem: appSidebarProjectItem,
 	appSidebarProjectsSidebarDropdown: appSidebarProjectsSidebarDropdown,
@@ -146919,56 +147047,78 @@ function DeleteApiModal({ isOpen, onClose, apiKey, tenantKey }) {
     return (jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: jsxs(DialogContent, { "aria-describedby": "delete-api-key-description", children: [jsx(DialogHeader, { children: jsx(DialogTitle, { className: "ibl-dialog-title", children: t('apiTabDeleteApiModal2.title') }) }), jsx("div", { className: "my-5", children: jsx("p", { className: "text-sm text-[#646464]", children: t('apiTabDeleteApiModal2.confirmationText', { name: apiKey.name }) }) }), jsxs(DialogFooter, { className: "gap-3", children: [jsx(Button$1, { variant: "outline", onClick: onClose, children: t('apiTabDeleteApiModal2.cancel') }), jsx(Button$1, { className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", onClick: handleDeleteApiKey, disabled: isLoading, children: isLoading ? t('apiTabDeleteApiModal2.deleting') : t('apiTabDeleteApiModal2.delete') })] })] }) }));
 }
 
+// Platform API token permission modes
+const API_TOKEN_MODES = {
+    OWNER: 'owner',
+    TOKEN_POLICIES: 'token_policies',
+};
+// Rows per page for the API keys table (the endpoint paginates only when page_size is sent)
+const API_KEYS_PAGE_SIZE = 10;
+// Result cap and debounce for the policy/group pickers
+const RBAC_PICKER_PAGE_SIZE = 20;
+const RBAC_SEARCH_DEBOUNCE_MS = 300;
 /**
- * Blue informational banner used to describe a section, matching the RBAC
- * management tab styling (see `admin.tsx`).
+ * Used when the field-permissions request fails. An absent field means
+ * "unprotected", so a failed lookup must not be read as "everything writable".
  */
-const InfoBanner = ({ icon, title, id, children, className }) => (jsxs("div", { className: `flex gap-3 items-center border rounded-lg p-4 bg-blue-50/60 border-blue-100 ${className !== null && className !== void 0 ? className : ''}`, children: [icon && (jsx("div", { className: "shrink-0 w-9 h-9 rounded-md flex items-center justify-center bg-blue-100 text-blue-600", children: icon })), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("h3", { className: "text-sm font-semibold mb-1 text-blue-900", children: title }), jsx("p", { id: id, className: "text-sm text-gray-600 leading-relaxed", children: children })] })] }));
+const DENIED_TOKEN_POLICY_PERMISSIONS = {
+    mode: { write: false },
+    policies_to_add: { write: false },
+    policies_to_remove: { write: false },
+    groups_to_add: { write: false },
+    groups_to_remove: { write: false },
+};
 
-function IntegrationAutogeneratedTab({ tenantKey }) {
-    const { data: apiKeys, isLoading: isApiKeysLoading } = useGetApiKeysQuery({
-        platformKey: tenantKey,
-    });
-    const [apiKeyToDelete, setApiKeyToDelete] = React__default.useState(null);
-    function closeDeleteApiModal() {
-        setApiKeyToDelete(null);
-    }
-    function openDeleteApiModal(apiKey) {
-        setApiKeyToDelete(apiKey);
-    }
-    return (jsxs(Fragment$1, { children: [jsxs("div", { className: "space-y-4", children: [jsx(InfoBanner, { icon: jsx(KeyRound, { className: "w-5 h-5" }), children: "These are authentication keys that you've generated for external applications to authenticate with your service. Keys are displayed only once when generated." }), jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-x-auto", children: jsxs("table", { className: "w-full text-sm", children: [jsx("thead", { className: "bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600", children: jsxs("tr", { children: [jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Name" }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Created" }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Expires" }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400 w-[50px]" })] }) }), jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-600", children: isApiKeysLoading ? (jsx("tr", { children: jsx("td", { colSpan: 4, className: "px-6 py-8 text-center text-sm text-gray-500", children: "Loading..." }) })) : (apiKeys === null || apiKeys === void 0 ? void 0 : apiKeys.length) === 0 ? (jsx("tr", { children: jsx("td", { colSpan: 4, className: "px-6 py-8 text-center text-sm text-gray-500", children: "No API keys found" }) })) : (apiKeys === null || apiKeys === void 0 ? void 0 : apiKeys.map((apiKey) => (jsxs("tr", { children: [jsx("td", { className: "px-6 py-4 whitespace-nowrap text-gray-900 dark:text-gray-100", children: apiKey.name }), jsx("td", { className: "px-6 py-4 whitespace-nowrap text-gray-600 dark:text-gray-300", children: apiKey.created ? format$1(apiKey.created, 'PPP') : 'N/A' }), jsx("td", { className: "px-6 py-4 whitespace-nowrap text-gray-600 dark:text-gray-300", children: apiKey.expires ? format$1(apiKey.expires, 'PPP') : 'N/A' }), jsx("td", { className: "px-6 py-4", children: jsx(Button$1, { variant: "ghost", size: "sm", className: "cursor-pointer", onClick: () => openDeleteApiModal({ name: apiKey.name }), children: jsx(Trash, { className: "h-4 w-4" }) }) })] }, apiKey.name)))) })] }) })] }), apiKeyToDelete && (jsx(DeleteApiModal, { isOpen: !!apiKeyToDelete, onClose: closeDeleteApiModal, apiKey: apiKeyToDelete, tenantKey: tenantKey }))] }));
+/** Seconds from now until `targetDate`, the unit the `expires_in` duration takes. */
+function secondsUntil(targetDate) {
+    const oneDay = 24 * 60 * 60 * 1000;
+    const daysDifference = Math.ceil((targetDate.getTime() - Date.now()) / oneDay);
+    return daysDifference * 24 * 3600;
 }
-
-function useCopyToClipboard(timeout = 500) {
-    const [status, setStatus] = useState('idle');
-    const copy = useCallback(async (text) => {
-        if (!(navigator === null || navigator === void 0 ? void 0 : navigator.clipboard)) {
-            console.warn('Clipboard not supported');
-            return;
-        }
-        // Try to save to clipboard then save it in the state if worked
-        try {
-            await navigator.clipboard.writeText(text);
-            setStatus('success');
-            setTimeout(() => {
-                setStatus('idle');
-            }, timeout);
-            return;
-        }
-        catch (_a) {
-            //Sentry.captureException(String(error));
-            setStatus('error');
-            return;
-        }
-    }, [timeout]);
-    return { copy, status };
+function toSelections(associations) {
+    return (associations !== null && associations !== void 0 ? associations : []).map((association) => ({
+        value: String(association.id),
+        label: association.name || `#${association.id}`,
+    }));
 }
-
-function ApiKeyModal({ isOpen, onClose, apiKey }) {
-    const t = useT();
-    const { copy, status } = useCopyToClipboard(800);
-    const Icon = status === 'success' ? Check : Copy;
-    return (jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { className: "ibl-dialog-title", children: t('apiTabApiKeyModal.title') }) }), jsx(DialogDescription, { className: "sr-only", children: t('apiTabApiKeyModal.dialogDescription') }), jsxs("div", { className: "grid gap-6", children: [jsxs("p", { className: "text-sm text-muted-foreground grid gap-2", children: [jsx("span", { children: t('apiTabApiKeyModal.securityWarning') }), jsx("span", { children: t('apiTabApiKeyModal.lostKeyWarning') })] }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(Input, { defaultValue: apiKey, readOnly: true }), jsx(Button$1, { size: "icon", className: "ibl-button-primary cursor-pointer", onClick: () => copy(apiKey), children: jsx(Icon, { className: "h-4 w-4" }) })] })] })] }) }));
+function ids(items) {
+    return items.map((item) => Number(item.value));
+}
+/**
+ * `mode` plus the policy/group deltas the endpoint expects, omitting any field
+ * the caller cannot write and any empty delta. On create there is no
+ * `initialMode`/`initial*`, so `mode` is always sent and every selection is an
+ * addition; on edit only what actually changed is included.
+ */
+function buildTokenPolicyPayload({ mode, initialMode, policies, groups, initialPolicies = [], initialGroups = [], fieldPermissions, }) {
+    const payload = {};
+    if (mode !== initialMode && canWriteField(fieldPermissions, 'mode')) {
+        payload.mode = mode;
+    }
+    if (mode !== API_TOKEN_MODES.TOKEN_POLICIES) {
+        return payload;
+    }
+    const selectedPolicyIds = new Set(ids(policies));
+    const initialPolicyIds = new Set(ids(initialPolicies));
+    const selectedGroupIds = new Set(ids(groups));
+    const initialGroupIds = new Set(ids(initialGroups));
+    const policiesToAdd = [...selectedPolicyIds].filter((id) => !initialPolicyIds.has(id));
+    const policiesToRemove = [...initialPolicyIds].filter((id) => !selectedPolicyIds.has(id));
+    const groupsToAdd = [...selectedGroupIds].filter((id) => !initialGroupIds.has(id));
+    const groupsToRemove = [...initialGroupIds].filter((id) => !selectedGroupIds.has(id));
+    if (policiesToAdd.length && canWriteField(fieldPermissions, 'policies_to_add')) {
+        payload.policies_to_add = policiesToAdd;
+    }
+    if (policiesToRemove.length && canWriteField(fieldPermissions, 'policies_to_remove')) {
+        payload.policies_to_remove = policiesToRemove;
+    }
+    if (groupsToAdd.length && canWriteField(fieldPermissions, 'groups_to_add')) {
+        payload.groups_to_add = groupsToAdd;
+    }
+    if (groupsToRemove.length && canWriteField(fieldPermissions, 'groups_to_remove')) {
+        payload.groups_to_remove = groupsToRemove;
+    }
+    return payload;
 }
 
 const offsetFormatCache = {};
@@ -150683,6 +150833,1096 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
             !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
 }
 
+/** Inline calendar — a popover would close the surrounding dialog on select. */
+function ExpirationDateField({ value, onChange, helpText }) {
+    const t = useT();
+    const [isCalendarOpen, setIsCalendarOpen] = React__default.useState(false);
+    return (jsxs("div", { className: "space-y-1.5", children: [jsx(Label$2, { className: "flex items-center text-sm font-medium text-[#646464]", children: t('apiTabLabels.createModal.expirationLabel') }), jsxs("div", { className: "flex items-center gap-2", children: [jsxs(Button$1, { type: "button", variant: "outline", "aria-haspopup": "dialog", "aria-expanded": isCalendarOpen, onClick: () => setIsCalendarOpen((open) => !open), className: cn('flex-1 pl-3 text-left font-normal', !value && 'text-muted-foreground'), children: [value ? (format$1(value, 'PPP')) : (jsx("span", { children: t('apiTabLabels.createModal.expirationPlaceholder') })), jsx(Calendar$1, { className: "ml-auto h-4 w-4 opacity-50" })] }), value && (jsx(Button$1, { type: "button", variant: "ghost", size: "icon", "aria-label": t('apiTabTokenPolicies.clearExpiration'), onClick: () => {
+                            onChange(null);
+                            setIsCalendarOpen(false);
+                        }, children: jsx(X$1, { className: "h-4 w-4" }) }))] }), isCalendarOpen && (jsx("div", { className: "mt-2 w-auto rounded-md border border-gray-200 dark:border-gray-700", children: jsx(Calendar, { mode: "single", 
+                    // @ts-expect-error - Calendar selected prop expects Date but the field may be null
+                    selected: value, onSelect: (date) => {
+                        onChange(date !== null && date !== void 0 ? date : null);
+                        setIsCalendarOpen(false);
+                    }, disabled: (date) => date && date < new Date() }) })), helpText && jsx("p", { className: "text-xs text-muted-foreground", children: helpText })] }));
+}
+
+// packages/core/primitive/src/primitive.tsx
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
+    PROVIDER_NAME,
+    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
+  );
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = React__default.useRef(null);
+    const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlot = React__default.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return /* @__PURE__ */ jsx(Slot$2, { ref: composedRefs, children });
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-radix-collection-item";
+  const CollectionItemSlot = React__default.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = React__default.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      React__default.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return /* @__PURE__ */ jsx(Slot$2, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React__default.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode) return [];
+      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection,
+    createCollectionScope
+  ];
+}
+
+// packages/react/use-layout-effect/src/useLayoutEffect.tsx
+var useLayoutEffect2 = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {
+};
+
+// packages/react/id/src/id.tsx
+var useReactId = React["useId".toString()] || (() => void 0);
+var count = 0;
+function useId(deterministicId) {
+  const [id, setId] = React.useState(useReactId());
+  useLayoutEffect2(() => {
+    setId((reactId) => reactId ?? String(count++));
+  }, [deterministicId]);
+  return (id ? `radix-${id}` : "");
+}
+
+// packages/react/use-callback-ref/src/useCallbackRef.tsx
+function useCallbackRef(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+
+// packages/react/use-controllable-state/src/useControllableState.tsx
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  }
+}) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+  const setValue = React.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue;
+        const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
+        if (value2 !== prop) handleChange(value2);
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, handleChange]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const uncontrolledState = React.useState(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+  return uncontrolledState;
+}
+
+// packages/react/direction/src/Direction.tsx
+var DirectionContext = React.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = React.useContext(DirectionContext);
+  return localDir || globalDir || "ltr";
+}
+
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var GROUP_NAME$2 = "RovingFocusGroup";
+var [Collection$1, useCollection$1, createCollectionScope$1] = createCollection(GROUP_NAME$2);
+var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
+  GROUP_NAME$2,
+  [createCollectionScope$1]
+);
+var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME$2);
+var RovingFocusGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Collection$1.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection$1.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+  }
+);
+RovingFocusGroup.displayName = GROUP_NAME$2;
+var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = false,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    preventScrollOnEntryFocus = false,
+    ...groupProps
+  } = props;
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const direction = useDirection(dir);
+  const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
+    prop: currentTabStopIdProp,
+    defaultProp: defaultCurrentTabStopId,
+    onChange: onCurrentTabStopIdChange
+  });
+  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+  const handleEntryFocus = useCallbackRef(onEntryFocus);
+  const getItems = useCollection$1(__scopeRovingFocusGroup);
+  const isClickFocusRef = React.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+    }
+  }, [handleEntryFocus]);
+  return /* @__PURE__ */ jsx(
+    RovingFocusProvider,
+    {
+      scope: __scopeRovingFocusGroup,
+      orientation,
+      dir: direction,
+      loop,
+      currentTabStopId,
+      onItemFocus: React.useCallback(
+        (tabStopId) => setCurrentTabStopId(tabStopId),
+        [setCurrentTabStopId]
+      ),
+      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
+      onFocusableItemAdd: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount + 1),
+        []
+      ),
+      onFocusableItemRemove: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount - 1),
+        []
+      ),
+      children: /* @__PURE__ */ jsx(
+        Primitive$1.div,
+        {
+          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+          "data-orientation": orientation,
+          ...groupProps,
+          ref: composedRefs,
+          style: { outline: "none", ...props.style },
+          onMouseDown: composeEventHandlers(props.onMouseDown, () => {
+            isClickFocusRef.current = true;
+          }),
+          onFocus: composeEventHandlers(props.onFocus, (event) => {
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+              event.currentTarget.dispatchEvent(entryFocusEvent);
+              if (!entryFocusEvent.defaultPrevented) {
+                const items = getItems().filter((item) => item.focusable);
+                const activeItem = items.find((item) => item.active);
+                const currentItem = items.find((item) => item.id === currentTabStopId);
+                const candidateItems = [activeItem, currentItem, ...items].filter(
+                  Boolean
+                );
+                const candidateNodes = candidateItems.map((item) => item.ref.current);
+                focusFirst$1(candidateNodes, preventScrollOnEntryFocus);
+              }
+            }
+            isClickFocusRef.current = false;
+          }),
+          onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
+        }
+      )
+    }
+  );
+});
+var ITEM_NAME$3 = "RovingFocusGroupItem";
+var RovingFocusGroupItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeRovingFocusGroup,
+      focusable = true,
+      active = false,
+      tabStopId,
+      ...itemProps
+    } = props;
+    const autoId = useId();
+    const id = tabStopId || autoId;
+    const context = useRovingFocusContext(ITEM_NAME$3, __scopeRovingFocusGroup);
+    const isCurrentTabStop = context.currentTabStopId === id;
+    const getItems = useCollection$1(__scopeRovingFocusGroup);
+    const { onFocusableItemAdd, onFocusableItemRemove } = context;
+    React.useEffect(() => {
+      if (focusable) {
+        onFocusableItemAdd();
+        return () => onFocusableItemRemove();
+      }
+    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
+    return /* @__PURE__ */ jsx(
+      Collection$1.ItemSlot,
+      {
+        scope: __scopeRovingFocusGroup,
+        id,
+        focusable,
+        active,
+        children: /* @__PURE__ */ jsx(
+          Primitive$1.span,
+          {
+            tabIndex: isCurrentTabStop ? 0 : -1,
+            "data-orientation": context.orientation,
+            ...itemProps,
+            ref: forwardedRef,
+            onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
+              if (!focusable) event.preventDefault();
+              else context.onItemFocus(id);
+            }),
+            onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
+            onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+              if (event.key === "Tab" && event.shiftKey) {
+                context.onItemShiftTab();
+                return;
+              }
+              if (event.target !== event.currentTarget) return;
+              const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+              if (focusIntent !== void 0) {
+                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+                event.preventDefault();
+                const items = getItems().filter((item) => item.focusable);
+                let candidateNodes = items.map((item) => item.ref.current);
+                if (focusIntent === "last") candidateNodes.reverse();
+                else if (focusIntent === "prev" || focusIntent === "next") {
+                  if (focusIntent === "prev") candidateNodes.reverse();
+                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                  candidateNodes = context.loop ? wrapArray$1(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+                }
+                setTimeout(() => focusFirst$1(candidateNodes));
+              }
+            })
+          }
+        )
+      }
+    );
+  }
+);
+RovingFocusGroupItem.displayName = ITEM_NAME$3;
+var MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst$1(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray$1(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+var Root$2 = RovingFocusGroup;
+var Item$1 = RovingFocusGroupItem;
+
+// packages/react/use-size/src/useSize.tsx
+function useSize(element) {
+  const [size, setSize] = React.useState(void 0);
+  useLayoutEffect2(() => {
+    if (element) {
+      setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries)) {
+          return;
+        }
+        if (!entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        let width;
+        let height;
+        if ("borderBoxSize" in entry) {
+          const borderSizeEntry = entry["borderBoxSize"];
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+          width = borderSize["inlineSize"];
+          height = borderSize["blockSize"];
+        } else {
+          width = element.offsetWidth;
+          height = element.offsetHeight;
+        }
+        setSize({ width, height });
+      });
+      resizeObserver.observe(element, { box: "border-box" });
+      return () => resizeObserver.unobserve(element);
+    } else {
+      setSize(void 0);
+    }
+  }, [element]);
+  return size;
+}
+
+// packages/react/use-previous/src/usePrevious.tsx
+function usePrevious(value) {
+  const ref = React.useRef({ value, previous: value });
+  return React.useMemo(() => {
+    if (ref.current.value !== value) {
+      ref.current.previous = ref.current.value;
+      ref.current.value = value;
+    }
+    return ref.current.previous;
+  }, [value]);
+}
+
+function useStateMachine(initialState, machine) {
+  return React.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+
+// packages/react/presence/src/Presence.tsx
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React.useState();
+  const stylesRef = React.useRef({});
+  const prevPresentRef = React.useRef(present);
+  const prevAnimationNameRef = React.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React.useCallback((node2) => {
+      if (node2) stylesRef.current = getComputedStyle(node2);
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+var RADIO_NAME = "Radio";
+var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
+var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME);
+var Radio = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeRadio,
+      name,
+      checked = false,
+      required,
+      disabled,
+      value = "on",
+      onCheck,
+      form,
+      ...radioProps
+    } = props;
+    const [button, setButton] = React.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
+    const hasConsumerStoppedPropagationRef = React.useRef(false);
+    const isFormControl = button ? form || !!button.closest("form") : true;
+    return /* @__PURE__ */ jsxs(RadioProvider, { scope: __scopeRadio, checked, disabled, children: [
+      /* @__PURE__ */ jsx(
+        Primitive$1.button,
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": checked,
+          "data-state": getState(checked),
+          "data-disabled": disabled ? "" : void 0,
+          disabled,
+          value,
+          ...radioProps,
+          ref: composedRefs,
+          onClick: composeEventHandlers(props.onClick, (event) => {
+            if (!checked) onCheck?.();
+            if (isFormControl) {
+              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+          })
+        }
+      ),
+      isFormControl && /* @__PURE__ */ jsx(
+        BubbleInput,
+        {
+          control: button,
+          bubbles: !hasConsumerStoppedPropagationRef.current,
+          name,
+          value,
+          checked,
+          required,
+          disabled,
+          form,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = RADIO_NAME;
+var INDICATOR_NAME$1 = "RadioIndicator";
+var RadioIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeRadio, forceMount, ...indicatorProps } = props;
+    const context = useRadioContext(INDICATOR_NAME$1, __scopeRadio);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.checked, children: /* @__PURE__ */ jsx(
+      Primitive$1.span,
+      {
+        "data-state": getState(context.checked),
+        "data-disabled": context.disabled ? "" : void 0,
+        ...indicatorProps,
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
+RadioIndicator.displayName = INDICATOR_NAME$1;
+var BubbleInput = (props) => {
+  const { control, checked, bubbles = true, ...inputProps } = props;
+  const ref = React.useRef(null);
+  const prevChecked = usePrevious(checked);
+  const controlSize = useSize(control);
+  React.useEffect(() => {
+    const input = ref.current;
+    const inputProto = window.HTMLInputElement.prototype;
+    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
+    const setChecked = descriptor.set;
+    if (prevChecked !== checked && setChecked) {
+      const event = new Event("click", { bubbles });
+      setChecked.call(input, checked);
+      input.dispatchEvent(event);
+    }
+  }, [prevChecked, checked, bubbles]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "radio",
+      "aria-hidden": true,
+      defaultChecked: checked,
+      ...inputProps,
+      tabIndex: -1,
+      ref,
+      style: {
+        ...props.style,
+        ...controlSize,
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0,
+        margin: 0
+      }
+    }
+  );
+};
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+var RADIO_GROUP_NAME$2 = "RadioGroup";
+var [createRadioGroupContext] = createContextScope(RADIO_GROUP_NAME$2, [
+  createRovingFocusGroupScope,
+  createRadioScope
+]);
+var useRovingFocusGroupScope$1 = createRovingFocusGroupScope();
+var useRadioScope = createRadioScope();
+var [RadioGroupProvider$1, useRadioGroupContext$1] = createRadioGroupContext(RADIO_GROUP_NAME$2);
+var RadioGroup$2 = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeRadioGroup,
+      name,
+      defaultValue,
+      value: valueProp,
+      required = false,
+      disabled = false,
+      orientation,
+      dir,
+      loop = true,
+      onValueChange,
+      ...groupProps
+    } = props;
+    const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeRadioGroup);
+    const direction = useDirection(dir);
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsx(
+      RadioGroupProvider$1,
+      {
+        scope: __scopeRadioGroup,
+        name,
+        required,
+        disabled,
+        value,
+        onValueChange: setValue,
+        children: /* @__PURE__ */ jsx(
+          Root$2,
+          {
+            asChild: true,
+            ...rovingFocusGroupScope,
+            orientation,
+            dir: direction,
+            loop,
+            children: /* @__PURE__ */ jsx(
+              Primitive$1.div,
+              {
+                role: "radiogroup",
+                "aria-required": required,
+                "aria-orientation": orientation,
+                "data-disabled": disabled ? "" : void 0,
+                dir: direction,
+                ...groupProps,
+                ref: forwardedRef
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+RadioGroup$2.displayName = RADIO_GROUP_NAME$2;
+var ITEM_NAME$2 = "RadioGroupItem";
+var RadioGroupItem$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeRadioGroup, disabled, ...itemProps } = props;
+    const context = useRadioGroupContext$1(ITEM_NAME$2, __scopeRadioGroup);
+    const isDisabled = context.disabled || disabled;
+    const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeRadioGroup);
+    const radioScope = useRadioScope(__scopeRadioGroup);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const checked = context.value === itemProps.value;
+    const isArrowKeyPressedRef = React.useRef(false);
+    React.useEffect(() => {
+      const handleKeyDown = (event) => {
+        if (ARROW_KEYS.includes(event.key)) {
+          isArrowKeyPressedRef.current = true;
+        }
+      };
+      const handleKeyUp = () => isArrowKeyPressedRef.current = false;
+      document.addEventListener("keydown", handleKeyDown);
+      document.addEventListener("keyup", handleKeyUp);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("keyup", handleKeyUp);
+      };
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Item$1,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !isDisabled,
+        active: checked,
+        children: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            disabled: isDisabled,
+            required: context.required,
+            checked,
+            ...radioScope,
+            ...itemProps,
+            name: context.name,
+            ref: composedRefs,
+            onCheck: () => context.onValueChange(itemProps.value),
+            onKeyDown: composeEventHandlers((event) => {
+              if (event.key === "Enter") event.preventDefault();
+            }),
+            onFocus: composeEventHandlers(itemProps.onFocus, () => {
+              if (isArrowKeyPressedRef.current) ref.current?.click();
+            })
+          }
+        )
+      }
+    );
+  }
+);
+RadioGroupItem$1.displayName = ITEM_NAME$2;
+var INDICATOR_NAME2 = "RadioGroupIndicator";
+var RadioGroupIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeRadioGroup, ...indicatorProps } = props;
+    const radioScope = useRadioScope(__scopeRadioGroup);
+    return /* @__PURE__ */ jsx(RadioIndicator, { ...radioScope, ...indicatorProps, ref: forwardedRef });
+  }
+);
+RadioGroupIndicator.displayName = INDICATOR_NAME2;
+var Root2$2 = RadioGroup$2;
+var Item2$2 = RadioGroupItem$1;
+var Indicator = RadioGroupIndicator;
+
+function RadioGroup$1({ className, ...props }) {
+    return (jsx(Root2$2, { "data-slot": "radio-group", className: cn('grid gap-3', className), ...props }));
+}
+function RadioGroupItem({ className, ...props }) {
+    return (jsx(Item2$2, { "data-slot": "radio-group-item", className: cn('border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: jsx(Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: jsx(Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
+}
+
+function SearchableMultiSelect({ items, selectedItems, onSelectionChange, searchQuery, onSearchChange, isLoading, placeholder = 'Search and select items...', getItemValue, getItemLabel, className, maxHeight = 'max-h-60', inputId, ariaDescribedBy, onSelectedItemAction, selectedItemActionIcon, selectedItemActionAriaLabel = 'View item details', }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    // Handle outside click to close dropdown
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleSelectItem = (itemValue, itemLabel) => {
+        const newSelection = selectedItems.some((item) => item.value === itemValue)
+            ? selectedItems.filter((item) => item.value !== itemValue)
+            : [...selectedItems, { label: itemLabel, value: itemValue }];
+        onSelectionChange(newSelection);
+    };
+    const handleRemoveItem = (itemValue) => {
+        onSelectionChange(selectedItems.filter((item) => item.value !== itemValue));
+    };
+    return (jsxs("div", { className: cn('space-y-2', className), ref: containerRef, children: [jsxs("div", { className: "relative", children: [jsxs("div", { className: cn('flex min-h-[40px] w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background', 'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2', 'cursor-pointer'), children: [jsxs("div", { className: "flex flex-1 items-center gap-2", children: [jsx(Search, { className: "h-4 w-4 text-muted-foreground" }), jsx("input", { type: "text", placeholder: placeholder, value: searchQuery, onChange: (e) => onSearchChange(e.target.value), onFocus: () => setIsOpen(true), id: inputId, "aria-describedby": ariaDescribedBy, className: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground", onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: "flex items-center gap-1", children: [selectedItems.length > 0 && (jsx(Badge, { variant: "secondary", className: "text-xs", children: selectedItems.length })), jsx(X$1, { className: "h-4 w-4 text-muted-foreground cursor-pointer", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onSelectionChange([]);
+                                            onSearchChange('');
+                                            setIsOpen(false);
+                                        } })] })] }), isOpen && (jsx("div", { className: cn('absolute z-50 w-full mt-1 bg-white border rounded-md shadow-lg overflow-auto', maxHeight), children: isLoading ? (jsx("div", { className: "p-3 text-sm text-muted-foreground", children: "Loading..." })) : items.length > 0 ? (items.map((item) => {
+                            const itemValue = getItemValue(item);
+                            const itemLabel = getItemLabel(item);
+                            const isSelected = selectedItems.some((selected) => selected.value === itemValue);
+                            return (jsxs("div", { className: "flex items-center space-x-2 p-2 hover:bg-gray-50 cursor-pointer", onClick: () => handleSelectItem(itemValue, itemLabel), children: [jsx("div", { className: "flex items-center justify-center w-4 h-4", children: isSelected && jsx(Check, { className: "h-3 w-3 text-primary" }) }), jsx("span", { className: "text-sm", children: itemLabel })] }, itemValue));
+                        })) : (jsx("div", { className: "p-3 text-sm text-muted-foreground", children: searchQuery ? 'No items found' : 'Start typing to search items' })) }))] }), selectedItems.length > 0 && (jsx("div", { className: "flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100", children: selectedItems
+                    .slice()
+                    .reverse()
+                    .map((selectedItem) => {
+                    return (jsxs(Badge, { variant: "secondary", className: "text-xs whitespace-nowrap flex-shrink-0 font-normal", children: [selectedItem.label, onSelectedItemAction && (jsx("button", { type: "button", onClick: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    onSelectedItemAction(selectedItem);
+                                }, className: "ml-1 text-gray-500 hover:text-gray-700", "aria-label": selectedItemActionAriaLabel, children: selectedItemActionIcon !== null && selectedItemActionIcon !== void 0 ? selectedItemActionIcon : jsx(Eye, { className: "h-3 w-3" }) })), jsx("button", { type: "button", onClick: () => handleRemoveItem(selectedItem.value), className: "ml-1 text-gray-500 hover:text-gray-700", children: "\u00D7" })] }, selectedItem.value));
+                }) }))] }));
+}
+
+function useDebouncedValue$3(value, delay) {
+    const [debouncedValue, setDebouncedValue] = React__default.useState(value);
+    React__default.useEffect(() => {
+        const timer = window.setTimeout(() => setDebouncedValue(value), delay);
+        return () => window.clearTimeout(timer);
+    }, [value, delay]);
+    return debouncedValue;
+}
+function toList(response) {
+    if (Array.isArray(response))
+        return response;
+    const results = response === null || response === void 0 ? void 0 : response.results;
+    return Array.isArray(results) ? results : [];
+}
+function itemLabel(item) {
+    return item.name || item.unique_id || `#${item.id}`;
+}
+/**
+ * The platform-provisioned students group is not a meaningful scope for a
+ * token. Matched exactly: user-created groups carry a timestamp-suffixed slug
+ * (see GroupsTab's `generateUniqueId`), so only the provisioned group has this
+ * bare id and a group like `students-cohort-2024` is still selectable.
+ */
+const EXCLUDED_GROUP_UNIQUE_ID = 'students';
+function isSelectableGroup(group) {
+    var _a;
+    return ((_a = group.unique_id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== EXCLUDED_GROUP_UNIQUE_ID;
+}
+function ReadOnlySelection({ items, emptyLabel, }) {
+    if (items.length === 0) {
+        return jsx("p", { className: "text-sm text-muted-foreground", children: emptyLabel });
+    }
+    return (jsx("div", { className: "flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100", children: items.map((item) => (jsx(Badge, { variant: "secondary", className: "text-xs font-normal whitespace-nowrap shrink-0", children: item.label }, item.value))) }));
+}
+/**
+ * Permission-mode selector plus the policy/group pickers a `token_policies`
+ * token resolves its permissions from. Each control is gated on the write flag
+ * the `field-permissions` endpoint reports; a field the caller cannot write is
+ * rendered read-only instead of being hidden, so existing associations stay
+ * visible while editing.
+ */
+function TokenPolicyFields({ tenantKey, mode, onModeChange, policies, onPoliciesChange, groups, onGroupsChange, fieldPermissions, idPrefix, }) {
+    const t = useT();
+    const [policySearch, setPolicySearch] = React__default.useState('');
+    const [groupSearch, setGroupSearch] = React__default.useState('');
+    const debouncedPolicySearch = useDebouncedValue$3(policySearch, RBAC_SEARCH_DEBOUNCE_MS);
+    const debouncedGroupSearch = useDebouncedValue$3(groupSearch, RBAC_SEARCH_DEBOUNCE_MS);
+    const canWriteMode = canWriteField(fieldPermissions, 'mode');
+    const canWritePolicies = canWriteField(fieldPermissions, 'policies_to_add') ||
+        canWriteField(fieldPermissions, 'policies_to_remove');
+    const canWriteGroups = canWriteField(fieldPermissions, 'groups_to_add') ||
+        canWriteField(fieldPermissions, 'groups_to_remove');
+    const isTokenPolicyMode = mode === API_TOKEN_MODES.TOKEN_POLICIES;
+    const { data: policiesResponse, isFetching: isPoliciesFetching } = useGetRbacPoliciesQuery({
+        platformKey: tenantKey,
+        name: debouncedPolicySearch || undefined,
+        pageSize: RBAC_PICKER_PAGE_SIZE,
+        includeUsers: false,
+        includeGroups: false,
+    }, { skip: !tenantKey || !isTokenPolicyMode || !canWritePolicies });
+    const { data: groupsResponse, isFetching: isGroupsFetching } = useGetRbacGroupsQuery({
+        platformKey: tenantKey,
+        name: debouncedGroupSearch || undefined,
+        pageSize: RBAC_PICKER_PAGE_SIZE,
+        includeUsers: false,
+    }, { skip: !tenantKey || !isTokenPolicyMode || !canWriteGroups });
+    const policyOptions = React__default.useMemo(() => toList(policiesResponse), [policiesResponse]);
+    const groupOptions = React__default.useMemo(() => toList(groupsResponse).filter(isSelectableGroup), [groupsResponse]);
+    return (
+    // min-w-0 so this grid item can shrink below the badge rows' min-content
+    // width — without it the dialog scrolls instead of the badge row.
+    jsxs("div", { className: "min-w-0 space-y-5", children: [jsxs("div", { className: "space-y-1.5", children: [jsx(Label$2, { className: "flex items-center text-sm font-medium text-[#646464]", children: t('apiTabTokenPolicies.modeLabel') }), canWriteMode ? (jsx(RadioGroup$1, { value: mode, onValueChange: (value) => onModeChange(value), className: "gap-2", children: [
+                            {
+                                value: API_TOKEN_MODES.OWNER,
+                                label: t('apiTabTokenPolicies.ownerModeLabel'),
+                                description: t('apiTabTokenPolicies.ownerModeDescription'),
+                            },
+                            {
+                                value: API_TOKEN_MODES.TOKEN_POLICIES,
+                                label: t('apiTabTokenPolicies.tokenPoliciesModeLabel'),
+                                description: t('apiTabTokenPolicies.tokenPoliciesModeDescription'),
+                            },
+                        ].map((option) => (jsxs("div", { className: "flex items-start gap-2", children: [jsx(RadioGroupItem, { value: option.value, id: `${idPrefix}-mode-${option.value}`, className: "mt-0.5" }), jsxs("div", { className: "grid gap-0.5", children: [jsx(Label$2, { htmlFor: `${idPrefix}-mode-${option.value}`, className: "cursor-pointer text-sm font-medium", children: option.label }), jsx("p", { className: "text-xs text-muted-foreground", children: option.description })] })] }, option.value))) })) : (jsx("p", { className: "text-sm text-muted-foreground", children: mode === API_TOKEN_MODES.TOKEN_POLICIES
+                            ? t('apiTabTokenPolicies.tokenPoliciesModeLabel')
+                            : t('apiTabTokenPolicies.ownerModeLabel') }))] }), isTokenPolicyMode && (jsxs(Fragment$1, { children: [jsxs("div", { className: "space-y-1.5", children: [jsx(Label$2, { className: "flex items-center text-sm font-medium text-[#646464]", htmlFor: `${idPrefix}-policies`, children: t('apiTabTokenPolicies.policiesLabel') }), canWritePolicies ? (jsx(SearchableMultiSelect, { items: policyOptions, selectedItems: policies, onSelectionChange: onPoliciesChange, searchQuery: policySearch, onSearchChange: setPolicySearch, isLoading: isPoliciesFetching, placeholder: t('apiTabTokenPolicies.policiesPlaceholder'), getItemValue: (policy) => String(policy.id), getItemLabel: itemLabel, inputId: `${idPrefix}-policies`, ariaDescribedBy: `${idPrefix}-policies-help` })) : (jsx(ReadOnlySelection, { items: policies, emptyLabel: t('apiTabTokenPolicies.noneSelected') })), jsx("p", { id: `${idPrefix}-policies-help`, className: "text-xs text-muted-foreground", children: t('apiTabTokenPolicies.policiesHelp') })] }), jsxs("div", { className: "space-y-1.5", children: [jsx(Label$2, { className: "flex items-center text-sm font-medium text-[#646464]", htmlFor: `${idPrefix}-groups`, children: t('apiTabTokenPolicies.groupsLabel') }), canWriteGroups ? (jsx(SearchableMultiSelect, { items: groupOptions, selectedItems: groups, onSelectionChange: onGroupsChange, searchQuery: groupSearch, onSearchChange: setGroupSearch, isLoading: isGroupsFetching, placeholder: t('apiTabTokenPolicies.groupsPlaceholder'), getItemValue: (group) => String(group.id), getItemLabel: itemLabel, inputId: `${idPrefix}-groups`, ariaDescribedBy: `${idPrefix}-groups-help` })) : (jsx(ReadOnlySelection, { items: groups, emptyLabel: t('apiTabTokenPolicies.noneSelected') })), jsx("p", { id: `${idPrefix}-groups-help`, className: "text-xs text-muted-foreground", children: t('apiTabTokenPolicies.groupsHelp') })] })] }))] }));
+}
+
+const editApiFormSchema = z.object({
+    name: z
+        .string()
+        .min(1, 'API Key name is required')
+        .regex(/^[a-zA-Z0-9_-]+$/, 'can only contain letters, numbers, and hyphens'),
+    expiration_date: z.date().nullable(),
+});
+function EditApiKeyForm({ token, tenantKey, fieldPermissions, onClose, }) {
+    var _a;
+    const t = useT();
+    const [updateApiKey, { isLoading }] = useUpdateApiKeyMutation();
+    const initialPolicies = React__default.useMemo(() => toSelections(token.policies), [token.policies]);
+    const initialGroups = React__default.useMemo(() => toSelections(token.groups), [token.groups]);
+    const initialExpiration = React__default.useMemo(() => (token.expires ? new Date(token.expires) : null), [token.expires]);
+    const initialMode = (_a = token.mode) !== null && _a !== void 0 ? _a : API_TOKEN_MODES.OWNER;
+    const [mode, setMode] = React__default.useState(initialMode);
+    const [policies, setPolicies] = React__default.useState(initialPolicies);
+    const [groups, setGroups] = React__default.useState(initialGroups);
+    const form = useForm({
+        defaultValues: {
+            name: token.name,
+            expiration_date: initialExpiration,
+        },
+        validators: {
+            onChange: editApiFormSchema,
+        },
+        onSubmit: async ({ value }) => {
+            var _a, _b, _c;
+            const requestBody = buildTokenPolicyPayload({
+                mode,
+                initialMode,
+                policies,
+                groups,
+                initialPolicies,
+                initialGroups,
+                fieldPermissions,
+            });
+            if (value.name !== token.name) {
+                requestBody.name = value.name;
+            }
+            const nextExpiration = (_b = (_a = value.expiration_date) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : null;
+            const previousExpiration = (_c = initialExpiration === null || initialExpiration === void 0 ? void 0 : initialExpiration.getTime()) !== null && _c !== void 0 ? _c : null;
+            if (nextExpiration !== previousExpiration) {
+                requestBody.expires_in = value.expiration_date
+                    ? secondsUntil(value.expiration_date).toString()
+                    : null;
+            }
+            if (Object.keys(requestBody).length === 0) {
+                onClose();
+                return;
+            }
+            try {
+                await updateApiKey({
+                    name: token.name,
+                    platformKey: tenantKey,
+                    requestBody,
+                }).unwrap();
+                toast.success(t('apiTabEditApiModal.successToast'));
+                onClose();
+            }
+            catch (error) {
+                console.error(JSON.stringify({ tenant: tenantKey, error }));
+                toast.error(t('apiTabEditApiModal.errorToast'));
+            }
+        },
+    });
+    return (jsxs("form", { onSubmit: (formEvent) => {
+            formEvent.preventDefault();
+            formEvent.stopPropagation();
+            form.handleSubmit();
+        }, className: "mt-5 grid min-w-0 gap-5", children: [jsx(form.Field, { name: "name", children: (field) => {
+                    var _a, _b;
+                    const hasErrorAndIsDirty = ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) > 0 && field.state.meta.isDirty;
+                    return (jsxs("div", { className: "space-y-1.5", children: [jsxs(Label$2, { className: "flex items-center text-sm font-medium text-[#646464]", children: [t('apiTabCreateApiModal2.apiKeyName'), jsx("span", { className: "ml-1 text-red-500", children: "*" })] }), jsx(Input, { value: field.state.value, onChange: (event) => field.handleChange(event.target.value), autoComplete: "off" }), hasErrorAndIsDirty && (jsx("p", { className: "text-red-500 text-xs", children: (_b = field.state.meta.errors[0]) === null || _b === void 0 ? void 0 : _b.message })), field.state.value !== token.name && (jsxs("p", { className: "flex items-start gap-1.5 text-xs text-amber-700", children: [jsx(TriangleAlert, { className: "mt-0.5 h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), t('apiTabEditApiModal.renameWarning')] }))] }));
+                } }), jsx(form.Field, { name: "expiration_date", children: (field) => (jsx(ExpirationDateField, { value: field.state.value, onChange: (date) => field.handleChange(date), helpText: t('apiTabEditApiModal.expirationHelp') })) }), jsx(TokenPolicyFields, { tenantKey: tenantKey, mode: mode, onModeChange: setMode, policies: policies, onPoliciesChange: setPolicies, groups: groups, onGroupsChange: setGroups, fieldPermissions: fieldPermissions, idPrefix: "edit-api-key" }), jsxs(DialogFooter, { className: "justify-end gap-3", children: [jsx(Button$1, { type: "button", variant: "outline", onClick: onClose, disabled: isLoading, children: t('apiTabDeleteApiModal2.cancel') }), jsx(form.Subscribe, { selector: (state) => ({ canSubmit: state.canSubmit }), children: ({ canSubmit }) => (jsx(Button$1, { type: "submit", disabled: !canSubmit || isLoading, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", children: isLoading ? t('apiTabEditApiModal.saving') : t('apiTabEditApiModal.save') })) })] })] }));
+}
+function EditApiModal({ isOpen, onClose, apiKeyName, tenantKey }) {
+    var _a;
+    const t = useT();
+    const skip = !isOpen || !apiKeyName || !tenantKey;
+    const { data: token, isError: isTokenError, isFetching: isTokenFetching, } = useGetApiKeyQuery({ name: apiKeyName, platformKey: tenantKey }, { skip });
+    const { data: fieldPermissionsData, isError: isFieldPermissionsError, isLoading: isFieldPermissionsLoading, } = useGetApiKeyFieldPermissionsQuery({ platformKey: tenantKey }, { skip });
+    // The detail payload wins when it embeds write flags, since those describe
+    // this token rather than the create form.
+    const fieldPermissions = (_a = token === null || token === void 0 ? void 0 : token.field_permissions) !== null && _a !== void 0 ? _a : (isFieldPermissionsError ? DENIED_TOKEN_POLICY_PERMISSIONS : fieldPermissionsData);
+    // Both must settle first: an unresolved permission map reads as "all
+    // writable", which would render controls the caller may not actually have.
+    const isReady = Boolean(token) && !isFieldPermissionsLoading;
+    return (jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: jsxs(DialogContent, { "aria-describedby": "api-key-edit-description", className: "w-full max-w-md max-h-[85vh] overflow-y-auto", children: [jsx(DialogDescription, { className: "sr-only", children: t('apiTabEditApiModal.title') }), jsx(DialogHeader, { children: jsx(DialogTitle, { className: "ibl-dialog-title", children: t('apiTabEditApiModal.title') }) }), isReady && token ? (jsx(EditApiKeyForm, { token: token, tenantKey: tenantKey, fieldPermissions: fieldPermissions, onClose: onClose }, token.name)) : (jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: isTokenError && !isTokenFetching
+                        ? t('apiTabEditApiModal.loadError')
+                        : t('apiTabEditApiModal.loading') }))] }) }));
+}
+
+/**
+ * Blue informational banner used to describe a section, matching the RBAC
+ * management tab styling (see `admin.tsx`).
+ */
+const InfoBanner = ({ icon, title, id, children, className }) => (jsxs("div", { className: `flex gap-3 items-center border rounded-lg p-4 bg-blue-50/60 border-blue-100 ${className !== null && className !== void 0 ? className : ''}`, children: [icon && (jsx("div", { className: "shrink-0 w-9 h-9 rounded-md flex items-center justify-center bg-blue-100 text-blue-600", children: icon })), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("h3", { className: "text-sm font-semibold mb-1 text-blue-900", children: title }), jsx("p", { id: id, className: "text-sm text-gray-600 leading-relaxed", children: children })] })] }));
+
+function IntegrationAutogeneratedTab({ tenantKey }) {
+    const t = useT();
+    const [page, setPage] = React__default.useState(1);
+    const [apiKeyToDelete, setApiKeyToDelete] = React__default.useState(null);
+    const [apiKeyToEdit, setApiKeyToEdit] = React__default.useState(null);
+    const { data, isLoading: isApiKeysLoading } = useGetApiKeysQuery({
+        platformKey: tenantKey,
+        page,
+        pageSize: API_KEYS_PAGE_SIZE,
+    });
+    const { tokens: apiKeys, count } = unwrapApiTokenList(data);
+    const totalPages = Math.ceil(count / API_KEYS_PAGE_SIZE);
+    function closeDeleteApiModal() {
+        setApiKeyToDelete(null);
+    }
+    function openDeleteApiModal(apiKey) {
+        setApiKeyToDelete(apiKey);
+    }
+    return (jsxs(Fragment$1, { children: [jsxs("div", { className: "space-y-4", children: [jsx(InfoBanner, { icon: jsx(KeyRound, { className: "w-5 h-5" }), children: t('apiTabLabels.table.banner') }), jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-x-auto", children: jsxs("table", { className: "w-full text-sm", children: [jsx("thead", { className: "bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600", children: jsxs("tr", { children: [jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Name" }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: t('apiTabTokenPolicies.modeLabel') }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Created" }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Expires" }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400 w-[100px]" })] }) }), jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-600", children: isApiKeysLoading ? (jsx("tr", { children: jsx("td", { colSpan: 5, className: "px-6 py-8 text-center text-sm text-gray-500", children: "Loading..." }) })) : apiKeys.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: 5, className: "px-6 py-8 text-center text-sm text-gray-500", children: "No API keys found" }) })) : (apiKeys.map((apiKey) => (jsxs("tr", { children: [jsx("td", { className: "px-6 py-4 whitespace-nowrap text-gray-900 dark:text-gray-100", children: apiKey.name }), jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: jsx(Badge, { variant: "secondary", className: "font-normal", children: apiKey.mode === API_TOKEN_MODES.TOKEN_POLICIES
+                                                        ? t('apiTabTokenPolicies.tokenPoliciesModeLabel')
+                                                        : t('apiTabTokenPolicies.ownerModeLabel') }) }), jsx("td", { className: "px-6 py-4 whitespace-nowrap text-gray-600 dark:text-gray-300", children: apiKey.created ? format$1(apiKey.created, 'PPP') : 'N/A' }), jsx("td", { className: "px-6 py-4 whitespace-nowrap text-gray-600 dark:text-gray-300", children: apiKey.expires ? format$1(apiKey.expires, 'PPP') : 'N/A' }), jsx("td", { className: "px-6 py-4", children: jsxs("div", { className: "flex items-center gap-1", children: [jsx(Button$1, { variant: "ghost", size: "sm", className: "cursor-pointer", "aria-label": t('apiTabEditApiModal.editAriaLabel'), onClick: () => setApiKeyToEdit(apiKey.name), children: jsx(Pencil, { className: "h-4 w-4" }) }), jsx(Button$1, { variant: "ghost", size: "sm", className: "cursor-pointer", "aria-label": t('apiTabLabels.table.deleteAriaLabel'), onClick: () => openDeleteApiModal({ name: apiKey.name }), children: jsx(Trash, { className: "h-4 w-4" }) })] }) })] }, apiKey.name)))) })] }) }), totalPages > 1 && (jsx(IblPagination, { currentPage: page, totalPages: totalPages, onPageChange: setPage, disabled: isApiKeysLoading }))] }), apiKeyToDelete && (jsx(DeleteApiModal, { isOpen: !!apiKeyToDelete, onClose: closeDeleteApiModal, apiKey: apiKeyToDelete, tenantKey: tenantKey })), apiKeyToEdit && (jsx(EditApiModal, { isOpen: !!apiKeyToEdit, onClose: () => setApiKeyToEdit(null), apiKeyName: apiKeyToEdit, tenantKey: tenantKey }))] }));
+}
+
+function useCopyToClipboard(timeout = 500) {
+    const [status, setStatus] = useState('idle');
+    const copy = useCallback(async (text) => {
+        if (!(navigator === null || navigator === void 0 ? void 0 : navigator.clipboard)) {
+            console.warn('Clipboard not supported');
+            return;
+        }
+        // Try to save to clipboard then save it in the state if worked
+        try {
+            await navigator.clipboard.writeText(text);
+            setStatus('success');
+            setTimeout(() => {
+                setStatus('idle');
+            }, timeout);
+            return;
+        }
+        catch (_a) {
+            //Sentry.captureException(String(error));
+            setStatus('error');
+            return;
+        }
+    }, [timeout]);
+    return { copy, status };
+}
+
+function ApiKeyModal({ isOpen, onClose, apiKey }) {
+    const t = useT();
+    const { copy, status } = useCopyToClipboard(800);
+    const Icon = status === 'success' ? Check : Copy;
+    return (jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { className: "ibl-dialog-title", children: t('apiTabApiKeyModal.title') }) }), jsx(DialogDescription, { className: "sr-only", children: t('apiTabApiKeyModal.dialogDescription') }), jsxs("div", { className: "grid gap-6", children: [jsxs("p", { className: "text-sm text-muted-foreground grid gap-2", children: [jsx("span", { children: t('apiTabApiKeyModal.securityWarning') }), jsx("span", { children: t('apiTabApiKeyModal.lostKeyWarning') })] }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(Input, { defaultValue: apiKey, readOnly: true }), jsx(Button$1, { size: "icon", className: "ibl-button-primary cursor-pointer", onClick: () => copy(apiKey), children: jsx(Icon, { className: "h-4 w-4" }) })] })] })] }) }));
+}
+
+const NAME_FIELD_ID = 'create-api-key-name';
+const NAME_ERROR_ID = 'create-api-key-name-error';
 const createApiFormSchema = z.object({
     name: z
         .string()
@@ -150694,28 +151934,29 @@ const createApiFormDefaultValues = {
     name: '',
     expiration_date: null,
 };
-function daysFromCurrentDate(targetDate) {
-    const currentDate = new Date();
-    const oneDay = 24 * 60 * 60 * 1000; // Number of milliseconds in a day
-    const timeDifference = targetDate.getTime() - currentDate.getTime();
-    const daysDifference = Math.ceil(timeDifference / oneDay);
-    return daysDifference * 24 * 3600; // Number of seconds in a day
-}
 function CreateApiModal({ isOpen, onClose, tenantKey, username }) {
     const t = useT();
     const [apiKey, setApiKey] = React__default.useState(null);
-    const [isCalendarOpen, setIsCalendarOpen] = React__default.useState(false);
+    const [mode, setMode] = React__default.useState(API_TOKEN_MODES.OWNER);
+    const [policies, setPolicies] = React__default.useState([]);
+    const [groups, setGroups] = React__default.useState([]);
     const [createApiKey, { isLoading }] = useCreateApiKeyMutation();
+    const { data: fieldPermissionsData, isError: isFieldPermissionsError, isLoading: isFieldPermissionsLoading, } = useGetApiKeyFieldPermissionsQuery({ platformKey: tenantKey }, { skip: !isOpen || !tenantKey });
+    const fieldPermissions = isFieldPermissionsError
+        ? DENIED_TOKEN_POLICY_PERMISSIONS
+        : fieldPermissionsData;
     const form = useForm({
         defaultValues: createApiFormDefaultValues,
         validators: {
+            // `onMount` runs the schema against the empty defaults so the required
+            // name keeps Submit disabled from the start, rather than letting the
+            // first click on a pristine form fail silently.
+            onMount: createApiFormSchema,
             onChange: createApiFormSchema,
         },
         onSubmit: async ({ value }) => {
             try {
-                const expirationSeconds = value.expiration_date
-                    ? daysFromCurrentDate(value.expiration_date)
-                    : 0;
+                const expirationSeconds = value.expiration_date ? secondsUntil(value.expiration_date) : 0;
                 const response = await createApiKey({
                     requestBody: {
                         username: username !== null && username !== void 0 ? username : '',
@@ -150725,11 +151966,18 @@ function CreateApiModal({ isOpen, onClose, tenantKey, username }) {
                         created: new Date().toISOString(),
                         expires: expirationSeconds === 0 ? '' : expirationSeconds.toString(),
                         expires_in: expirationSeconds === 0 ? undefined : expirationSeconds.toString(),
+                        ...buildTokenPolicyPayload({ mode, policies, groups, fieldPermissions }),
                     },
                 }).unwrap();
                 toast.success(t('apiTabCreateApiModal2.apiKeyCreatedSuccessfully'));
                 form.reset();
+                setMode(API_TOKEN_MODES.OWNER);
+                setPolicies([]);
+                setGroups([]);
+                // The generated key lives outside this dialog, so closing the creation
+                // form still leaves it on screen for the one time it is readable.
                 setApiKey(response.key);
+                onClose();
             }
             catch (error) {
                 console.error(JSON.stringify(error));
@@ -150738,24 +151986,23 @@ function CreateApiModal({ isOpen, onClose, tenantKey, username }) {
             }
         },
     });
-    return (jsxs(Fragment$1, { children: [jsx(Dialog, { open: isOpen, onOpenChange: isLoading ? undefined : onClose, children: jsxs(DialogContent, { "aria-describedby": "api-key-creation-description", className: "w-full max-w-md", children: [jsx(DialogDescription, { className: "sr-only", children: t('apiTabCreateApiModal2.createApiKey') }), jsx(DialogHeader, { children: jsx(DialogTitle, { className: "ibl-dialog-title", children: t('apiTabCreateApiModal2.createApiKey') }) }), jsxs("form", { onSubmit: (formEvent) => {
+    return (jsxs(Fragment$1, { children: [jsx(Dialog, { open: isOpen, onOpenChange: isLoading ? undefined : onClose, children: jsxs(DialogContent, { "aria-describedby": "api-key-creation-description", className: "w-full max-w-md max-h-[85vh] overflow-y-auto", children: [jsx(DialogDescription, { className: "sr-only", children: t('apiTabCreateApiModal2.createApiKey') }), jsx(DialogHeader, { children: jsx(DialogTitle, { className: "ibl-dialog-title", children: t('apiTabCreateApiModal2.createApiKey') }) }), jsxs("form", { onSubmit: (formEvent) => {
                                 formEvent.preventDefault();
                                 formEvent.stopPropagation();
                                 form.handleSubmit();
-                            }, className: "mt-5 grid gap-5", children: [jsx(form.Field, { name: "name", children: (field) => {
-                                        var _a, _b;
-                                        const hasError = ((_a = field.state.meta.errors) === null || _a === void 0 ? void 0 : _a.length) > 0;
-                                        const isDirty = field.state.meta.isDirty;
-                                        const hasErrorAndIsDirty = hasError && isDirty;
-                                        return (jsxs("div", { className: "space-y-1.5", children: [jsxs(Label$2, { className: "flex items-center text-sm font-medium text-[#646464]", children: [t('apiTabCreateApiModal2.apiKeyName'), jsx("span", { className: "ml-1 text-red-500", children: "*" })] }), jsx(Input, { placeholder: t('apiTabCreateApiModal2.apiKeyNamePlaceholder'), value: field.state.value, onChange: (event) => field.handleChange(event.target.value), autoComplete: "off" }), hasErrorAndIsDirty && (jsx("p", { className: "text-red-500 text-xs", children: (_b = field.state.meta.errors[0]) === null || _b === void 0 ? void 0 : _b.message }))] }));
-                                    } }), jsx(form.Field, { name: "expiration_date", children: (field) => (jsxs("div", { className: "space-y-1.5", children: [jsx(Label$2, { className: "flex items-center text-sm font-medium text-[#646464]", children: "Expiration Date" }), jsxs("div", { children: [jsxs(Button$1, { type: "button", variant: "outline", "aria-haspopup": "dialog", "aria-expanded": isCalendarOpen, onClick: () => setIsCalendarOpen((open) => !open), className: cn('w-full pl-3 text-left font-normal', !field.state.value && 'text-muted-foreground'), children: [field.state.value ? (format$1(field.state.value, 'PPP')) : (jsx("span", { children: "Pick a date" })), jsx(Calendar$1, { className: "ml-auto h-4 w-4 opacity-50" })] }), isCalendarOpen && (jsx("div", { className: "mt-2 w-auto rounded-md border border-gray-200 dark:border-gray-700", children: jsx(Calendar, { mode: "single", 
-                                                            // @ts-expect-error - Calendar selected prop expects Date but form field may be null
-                                                            selected: field.state.value, onSelect: (date) => {
-                                                                field.handleChange(date !== null && date !== void 0 ? date : null);
-                                                                setIsCalendarOpen(false);
-                                                            }, disabled: (date) => date && date < new Date() }) }))] })] })) }), jsx(DialogFooter, { className: "justify-end", children: jsx(form.Subscribe, { selector: (state) => ({
+                            }, className: "mt-5 grid min-w-0 gap-5", children: [jsx(form.Field, { name: "name", children: (field) => {
+                                        var _a;
+                                        const errorMessage = (_a = field.state.meta.errors[0]) === null || _a === void 0 ? void 0 : _a.message;
+                                        // Wait for the user to engage with the field — typing or tabbing
+                                        // away — before flagging it, so an untouched form is not red on
+                                        // open, but an emptied or skipped field always explains itself.
+                                        const showError = Boolean(errorMessage && (field.state.meta.isDirty || field.state.meta.isBlurred));
+                                        return (jsxs("div", { className: "space-y-1.5", children: [jsxs(Label$2, { htmlFor: NAME_FIELD_ID, className: "flex items-center text-sm font-medium text-[#646464]", children: [t('apiTabCreateApiModal2.apiKeyName'), jsx("span", { className: "ml-1 text-red-500", children: "*" })] }), jsx(Input, { id: NAME_FIELD_ID, placeholder: t('apiTabCreateApiModal2.apiKeyNamePlaceholder'), value: field.state.value, onChange: (event) => field.handleChange(event.target.value), onBlur: field.handleBlur, autoComplete: "off", "aria-required": "true", "aria-invalid": showError, "aria-describedby": showError ? NAME_ERROR_ID : undefined }), showError && (jsx("p", { id: NAME_ERROR_ID, role: "alert", className: "text-red-500 text-xs", children: errorMessage }))] }));
+                                    } }), jsx(form.Field, { name: "expiration_date", children: (field) => (jsx(ExpirationDateField, { value: field.state.value, onChange: (date) => field.handleChange(date) })) }), !isFieldPermissionsLoading && (jsx(TokenPolicyFields, { tenantKey: tenantKey, mode: mode, onModeChange: setMode, policies: policies, onPoliciesChange: setPolicies, groups: groups, onGroupsChange: setGroups, fieldPermissions: fieldPermissions, idPrefix: "create-api-key" })), jsx(DialogFooter, { className: "justify-end", children: jsx(form.Subscribe, { selector: (state) => ({
                                             canSubmit: state.canSubmit,
-                                        }), children: ({ canSubmit }) => (jsx(Button$1, { type: "submit", disabled: !canSubmit || isLoading, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", children: isLoading ? 'Submitting...' : 'Submit' })) }) })] })] }) }), apiKey && jsx(ApiKeyModal, { isOpen: true, onClose: () => setApiKey(null), apiKey: apiKey })] }));
+                                        }), children: ({ canSubmit }) => (jsx(Button$1, { type: "submit", disabled: !canSubmit || isLoading, className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white hover:opacity-90", children: isLoading
+                                                ? t('apiTabLabels.createModal.submitting')
+                                                : t('apiTabLabels.createModal.submit') })) }) })] })] }) }), apiKey && jsx(ApiKeyModal, { isOpen: true, onClose: () => setApiKey(null), apiKey: apiKey })] }));
 }
 
 // Dynamic schema based on selected provider
@@ -154235,54 +155482,6 @@ function MonetizationTab({ platformKey, authURL }) {
     return (jsxs("div", { className: "container mx-auto max-w-7xl !mt-0 space-y-6", children: [isOwner && jsx(StripeConnect, { platformKey: platformKey }), jsx(PaywallConfig, { platformKey: platformKey, authURL: authURL, disabled: !isStripeReady })] }));
 }
 
-function SearchableMultiSelect({ items, selectedItems, onSelectionChange, searchQuery, onSearchChange, isLoading, placeholder = 'Search and select items...', getItemValue, getItemLabel, className, maxHeight = 'max-h-60', inputId, ariaDescribedBy, onSelectedItemAction, selectedItemActionIcon, selectedItemActionAriaLabel = 'View item details', }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const containerRef = useRef(null);
-    // Handle outside click to close dropdown
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-    const handleSelectItem = (itemValue, itemLabel) => {
-        const newSelection = selectedItems.some((item) => item.value === itemValue)
-            ? selectedItems.filter((item) => item.value !== itemValue)
-            : [...selectedItems, { label: itemLabel, value: itemValue }];
-        onSelectionChange(newSelection);
-    };
-    const handleRemoveItem = (itemValue) => {
-        onSelectionChange(selectedItems.filter((item) => item.value !== itemValue));
-    };
-    return (jsxs("div", { className: cn('space-y-2', className), ref: containerRef, children: [jsxs("div", { className: "relative", children: [jsxs("div", { className: cn('flex min-h-[40px] w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background', 'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2', 'cursor-pointer'), children: [jsxs("div", { className: "flex flex-1 items-center gap-2", children: [jsx(Search, { className: "h-4 w-4 text-muted-foreground" }), jsx("input", { type: "text", placeholder: placeholder, value: searchQuery, onChange: (e) => onSearchChange(e.target.value), onFocus: () => setIsOpen(true), id: inputId, "aria-describedby": ariaDescribedBy, className: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground", onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: "flex items-center gap-1", children: [selectedItems.length > 0 && (jsx(Badge, { variant: "secondary", className: "text-xs", children: selectedItems.length })), jsx(X$1, { className: "h-4 w-4 text-muted-foreground cursor-pointer", onClick: (e) => {
-                                            e.stopPropagation();
-                                            onSelectionChange([]);
-                                            onSearchChange('');
-                                            setIsOpen(false);
-                                        } })] })] }), isOpen && (jsx("div", { className: cn('absolute z-50 w-full mt-1 bg-white border rounded-md shadow-lg overflow-auto', maxHeight), children: isLoading ? (jsx("div", { className: "p-3 text-sm text-muted-foreground", children: "Loading..." })) : items.length > 0 ? (items.map((item) => {
-                            const itemValue = getItemValue(item);
-                            const itemLabel = getItemLabel(item);
-                            const isSelected = selectedItems.some((selected) => selected.value === itemValue);
-                            return (jsxs("div", { className: "flex items-center space-x-2 p-2 hover:bg-gray-50 cursor-pointer", onClick: () => handleSelectItem(itemValue, itemLabel), children: [jsx("div", { className: "flex items-center justify-center w-4 h-4", children: isSelected && jsx(Check, { className: "h-3 w-3 text-primary" }) }), jsx("span", { className: "text-sm", children: itemLabel })] }, itemValue));
-                        })) : (jsx("div", { className: "p-3 text-sm text-muted-foreground", children: searchQuery ? 'No items found' : 'Start typing to search items' })) }))] }), selectedItems.length > 0 && (jsx("div", { className: "flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100", children: selectedItems
-                    .slice()
-                    .reverse()
-                    .map((selectedItem) => {
-                    return (jsxs(Badge, { variant: "secondary", className: "text-xs whitespace-nowrap flex-shrink-0 font-normal", children: [selectedItem.label, onSelectedItemAction && (jsx("button", { type: "button", onClick: (event) => {
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    onSelectedItemAction(selectedItem);
-                                }, className: "ml-1 text-gray-500 hover:text-gray-700", "aria-label": selectedItemActionAriaLabel, children: selectedItemActionIcon !== null && selectedItemActionIcon !== void 0 ? selectedItemActionIcon : jsx(Eye, { className: "h-3 w-3" }) })), jsx("button", { type: "button", onClick: () => handleRemoveItem(selectedItem.value), className: "ml-1 text-gray-500 hover:text-gray-700", children: "\u00D7" })] }, selectedItem.value));
-                }) }))] }));
-}
-
 // ::- Persistent data structure representing an ordered mapping from
 // strings to values, with some convenient update methods.
 function OrderedMap(content) {
@@ -179591,11 +180790,11 @@ class Branch {
                 return;
             }
             if (remap) {
-                addBefore.push(new Item$1(item.map));
+                addBefore.push(new Item(item.map));
                 let step = item.step.map(remap.slice(mapFrom)), map;
                 if (step && transform.maybeStep(step).doc) {
                     map = transform.mapping.maps[transform.mapping.maps.length - 1];
-                    addAfter.push(new Item$1(map, undefined, undefined, addAfter.length + addBefore.length));
+                    addAfter.push(new Item(map, undefined, undefined, addAfter.length + addBefore.length));
                 }
                 mapFrom--;
                 if (map)
@@ -179618,7 +180817,7 @@ class Branch {
         let oldItems = this.items, lastItem = !preserveItems && oldItems.length ? oldItems.get(oldItems.length - 1) : null;
         for (let i = 0; i < transform.steps.length; i++) {
             let step = transform.steps[i].invert(transform.docs[i]);
-            let item = new Item$1(transform.mapping.maps[i], step, selection), merged;
+            let item = new Item(transform.mapping.maps[i], step, selection), merged;
             if (merged = lastItem && lastItem.merge(item)) {
                 item = merged;
                 if (i)
@@ -179653,7 +180852,7 @@ class Branch {
     addMaps(array) {
         if (this.eventCount == 0)
             return this;
-        return new Branch(this.items.append(array.map(map => new Item$1(map))), this.eventCount);
+        return new Branch(this.items.append(array.map(map => new Item(map))), this.eventCount);
     }
     // When the collab module receives remote changes, the history has
     // to know about those, so that it can adjust the steps that were
@@ -179680,15 +180879,15 @@ class Branch {
                 let selection = item.selection && item.selection.map(mapping.slice(iRebased + 1, pos));
                 if (selection)
                     eventCount++;
-                rebasedItems.push(new Item$1(map, step, selection));
+                rebasedItems.push(new Item(map, step, selection));
             }
             else {
-                rebasedItems.push(new Item$1(map));
+                rebasedItems.push(new Item(map));
             }
         }, start);
         let newMaps = [];
         for (let i = rebasedCount; i < newUntil; i++)
-            newMaps.push(new Item$1(mapping.maps[i]));
+            newMaps.push(new Item(mapping.maps[i]));
         let items = this.items.slice(0, start).append(newMaps).append(rebasedItems);
         let branch = new Branch(items, eventCount);
         if (branch.emptyItemCount() > max_empty_items)
@@ -179725,7 +180924,7 @@ class Branch {
                     let selection = item.selection && item.selection.map(remap.slice(mapFrom));
                     if (selection)
                         events++;
-                    let newItem = new Item$1(map.invert(), step, selection), merged, last = items.length - 1;
+                    let newItem = new Item(map.invert(), step, selection), merged, last = items.length - 1;
                     if (merged = items.length && items[last].merge(newItem))
                         items[last] = merged;
                     else
@@ -179750,7 +180949,7 @@ function cutOffEvents(items, n) {
     });
     return items.slice(cutPoint);
 }
-let Item$1 = class Item {
+class Item {
     constructor(
     // The (forward) step map for this item.
     map, 
@@ -179775,7 +180974,7 @@ let Item$1 = class Item {
                 return new Item(step.getMap().invert(), step, this.selection);
         }
     }
-};
+}
 // The value of the state field that tracks undo/redo history for that
 // state. Will be stored in the plugin state when the history plugin
 // is active.
@@ -180942,67 +182141,6 @@ var index_default$1 = TextAlign;
 // src/index.ts
 var index_default = Placeholder;
 
-// packages/core/primitive/src/primitive.tsx
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return function handleEvent(event) {
-    originalEventHandler?.(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  };
-}
-
-// packages/react/use-callback-ref/src/useCallbackRef.tsx
-function useCallbackRef(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
-}
-
-// packages/react/use-controllable-state/src/useControllableState.tsx
-function useControllableState({
-  prop,
-  defaultProp,
-  onChange = () => {
-  }
-}) {
-  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
-  const isControlled = prop !== void 0;
-  const value = isControlled ? prop : uncontrolledProp;
-  const handleChange = useCallbackRef(onChange);
-  const setValue = React.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const setter = nextValue;
-        const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
-        if (value2 !== prop) handleChange(value2);
-      } else {
-        setUncontrolledProp(nextValue);
-      }
-    },
-    [isControlled, prop, setUncontrolledProp, handleChange]
-  );
-  return [value, setValue];
-}
-function useUncontrolledState({
-  defaultProp,
-  onChange
-}) {
-  const uncontrolledState = React.useState(defaultProp);
-  const [value] = uncontrolledState;
-  const prevValueRef = React.useRef(value);
-  const handleChange = useCallbackRef(onChange);
-  React.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      handleChange(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef, handleChange]);
-  return uncontrolledState;
-}
-
 var NAME$1 = "Toggle";
 var Toggle$1 = React.forwardRef((props, forwardedRef) => {
   const { pressed: pressedProp, defaultPressed = false, onPressedChange, ...buttonProps } = props;
@@ -181029,7 +182167,7 @@ var Toggle$1 = React.forwardRef((props, forwardedRef) => {
   );
 });
 Toggle$1.displayName = NAME$1;
-var Root$2 = Toggle$1;
+var Root$1 = Toggle$1;
 
 const toggleVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground', {
     variants: {
@@ -181048,8 +182186,8 @@ const toggleVariants = cva('inline-flex items-center justify-center rounded-md t
         size: 'default',
     },
 });
-const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (jsx(Root$2, { ref: ref, className: cn(toggleVariants({ variant, size, className })), ...props })));
-Toggle.displayName = Root$2.displayName;
+const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (jsx(Root$1, { ref: ref, className: cn(toggleVariants({ variant, size, className })), ...props })));
+Toggle.displayName = Root$1.displayName;
 
 // src/separator.tsx
 var NAME = "Separator";
@@ -181074,10 +182212,10 @@ Separator$2.displayName = NAME;
 function isValidOrientation(orientation) {
   return ORIENTATIONS.includes(orientation);
 }
-var Root$1 = Separator$2;
+var Root = Separator$2;
 
-const Separator$1 = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (jsx(Root$1, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
-Separator$1.displayName = Root$1.displayName;
+const Separator$1 = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (jsx(Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
+Separator$1.displayName = Root.displayName;
 
 // Custom Div extension to preserve div elements with inline styles
 const Div = Node3.create({
@@ -181658,10 +182796,13 @@ function TopBanner({ parentContainerSelector, bannerText = '', loading = false,
  *   getSessionUuid={() => getCurrentSessionId()}
  *   getTenantKey={() => localStorage.getItem('tenant') || ''}
  *   getMentorId={() => extractMentorIdFromUrl()}
+ *   // Course/unit context is parsed from the URL the time was spent on:
+ *   getCourseId={(url) => parseCourseId(url)}
+ *   getBlockId={(url) => parseUnitId(url)}
  * />
  * ```
  */
-function TimeTrackingProvider({ intervalSeconds = 30, enabled = true, sessionUuid, getSessionUuid, getTenantKey, getMentorId, getCurrentUrl, onRouteChange, }) {
+function TimeTrackingProvider({ intervalSeconds = 30, enabled = true, sessionUuid, getSessionUuid, getTenantKey, getMentorId, getCourseId, getBlockId, getCurrentUrl, onRouteChange, }) {
     // Initialize time tracking
     useTimeTracking({
         intervalSeconds,
@@ -181670,6 +182811,8 @@ function TimeTrackingProvider({ intervalSeconds = 30, enabled = true, sessionUui
         getSessionUuid,
         getTenantKey,
         getMentorId,
+        getCourseId,
+        getBlockId,
         getCurrentUrl,
         onRouteChange,
     });
@@ -181785,14 +182928,14 @@ var SUB_CLOSE_KEYS = {
   rtl: ["ArrowRight"]
 };
 var MENU_NAME = "Menu";
-var [Collection$1, useCollection$1, createCollectionScope$1] = createCollection$2(MENU_NAME);
+var [Collection, useCollection, createCollectionScope] = createCollection$2(MENU_NAME);
 var [createMenuContext, createMenuScope] = createContextScope$1(MENU_NAME, [
-  createCollectionScope$1,
+  createCollectionScope,
   createPopperScope$1,
   createRovingFocusGroupScope$1
 ]);
 var usePopperScope = createPopperScope$1();
-var useRovingFocusGroupScope$1 = createRovingFocusGroupScope$1();
+var useRovingFocusGroupScope = createRovingFocusGroupScope$1();
 var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
 var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
 var Menu = (props) => {
@@ -181866,7 +183009,7 @@ var MenuContent = React.forwardRef(
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useMenuContext(CONTENT_NAME$2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME$2, props.__scopeMenu);
-    return /* @__PURE__ */ jsx(Collection$1.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(Presence$2, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Collection$1.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(Presence$2, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }
 );
 var MenuRootContentModal = React.forwardRef(
@@ -181932,8 +183075,8 @@ var MenuContentImpl = React.forwardRef(
     const context = useMenuContext(CONTENT_NAME$2, __scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME$2, __scopeMenu);
     const popperScope = usePopperScope(__scopeMenu);
-    const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeMenu);
-    const getItems = useCollection$1(__scopeMenu);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+    const getItems = useCollection(__scopeMenu);
     const [currentItemId, setCurrentItemId] = React.useState(null);
     const contentRef = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, contentRef, context.onContentChange);
@@ -182061,7 +183204,7 @@ var MenuContentImpl = React.forwardRef(
                           const items = getItems().filter((item) => !item.disabled);
                           const candidateNodes = items.map((item) => item.ref.current);
                           if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
-                          focusFirst$1(candidateNodes);
+                          focusFirst(candidateNodes);
                         }),
                         onBlur: composeEventHandlers$2(props.onBlur, (event) => {
                           if (!event.currentTarget.contains(event.target)) {
@@ -182094,14 +183237,14 @@ var MenuContentImpl = React.forwardRef(
   }
 );
 MenuContent.displayName = CONTENT_NAME$2;
-var GROUP_NAME$2 = "MenuGroup";
+var GROUP_NAME$1 = "MenuGroup";
 var MenuGroup = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...groupProps } = props;
     return /* @__PURE__ */ jsx(Primitive$4.div, { role: "group", ...groupProps, ref: forwardedRef });
   }
 );
-MenuGroup.displayName = GROUP_NAME$2;
+MenuGroup.displayName = GROUP_NAME$1;
 var LABEL_NAME$1 = "MenuLabel";
 var MenuLabel = React.forwardRef(
   (props, forwardedRef) => {
@@ -182110,14 +183253,14 @@ var MenuLabel = React.forwardRef(
   }
 );
 MenuLabel.displayName = LABEL_NAME$1;
-var ITEM_NAME$3 = "MenuItem";
+var ITEM_NAME$1 = "MenuItem";
 var ITEM_SELECT = "menu.itemSelect";
 var MenuItem = React.forwardRef(
   (props, forwardedRef) => {
     const { disabled = false, onSelect, ...itemProps } = props;
     const ref = React.useRef(null);
-    const rootContext = useMenuRootContext(ITEM_NAME$3, props.__scopeMenu);
-    const contentContext = useMenuContentContext(ITEM_NAME$3, props.__scopeMenu);
+    const rootContext = useMenuRootContext(ITEM_NAME$1, props.__scopeMenu);
+    const contentContext = useMenuContentContext(ITEM_NAME$1, props.__scopeMenu);
     const composedRefs = useComposedRefs$1(forwardedRef, ref);
     const isPointerDownRef = React.useRef(false);
     const handleSelect = () => {
@@ -182159,12 +183302,12 @@ var MenuItem = React.forwardRef(
     );
   }
 );
-MenuItem.displayName = ITEM_NAME$3;
+MenuItem.displayName = ITEM_NAME$1;
 var MenuItemImpl = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
-    const contentContext = useMenuContentContext(ITEM_NAME$3, __scopeMenu);
-    const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeMenu);
+    const contentContext = useMenuContentContext(ITEM_NAME$1, __scopeMenu);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, ref);
     const [isFocused, setIsFocused] = React.useState(false);
@@ -182176,7 +183319,7 @@ var MenuItemImpl = React.forwardRef(
       }
     }, [itemProps.children]);
     return /* @__PURE__ */ jsx(
-      Collection$1.ItemSlot,
+      Collection.ItemSlot,
       {
         scope: __scopeMenu,
         disabled,
@@ -182238,9 +183381,9 @@ var MenuCheckboxItem = React.forwardRef(
   }
 );
 MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME$1;
-var RADIO_GROUP_NAME$2 = "MenuRadioGroup";
-var [RadioGroupProvider$1, useRadioGroupContext$1] = createMenuContext(
-  RADIO_GROUP_NAME$2,
+var RADIO_GROUP_NAME$1 = "MenuRadioGroup";
+var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
+  RADIO_GROUP_NAME$1,
   { value: void 0, onValueChange: () => {
   } }
 );
@@ -182248,15 +183391,15 @@ var MenuRadioGroup = React.forwardRef(
   (props, forwardedRef) => {
     const { value, onValueChange, ...groupProps } = props;
     const handleValueChange = useCallbackRef$2(onValueChange);
-    return /* @__PURE__ */ jsx(RadioGroupProvider$1, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx(MenuGroup, { ...groupProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ jsx(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx(MenuGroup, { ...groupProps, ref: forwardedRef }) });
   }
 );
-MenuRadioGroup.displayName = RADIO_GROUP_NAME$2;
+MenuRadioGroup.displayName = RADIO_GROUP_NAME$1;
 var RADIO_ITEM_NAME$1 = "MenuRadioItem";
 var MenuRadioItem = React.forwardRef(
   (props, forwardedRef) => {
     const { value, ...radioItemProps } = props;
-    const context = useRadioGroupContext$1(RADIO_ITEM_NAME$1, props.__scopeMenu);
+    const context = useRadioGroupContext(RADIO_ITEM_NAME$1, props.__scopeMenu);
     const checked = value === context.value;
     return /* @__PURE__ */ jsx(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx(
       MenuItem,
@@ -182474,7 +183617,7 @@ var MenuSubContent = React.forwardRef(
     const subContext = useMenuSubContext(SUB_CONTENT_NAME$1, props.__scopeMenu);
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs$1(forwardedRef, ref);
-    return /* @__PURE__ */ jsx(Collection$1.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(Presence$2, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Collection$1.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(Presence$2, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx(
       MenuContentImpl,
       {
         id: subContext.contentId,
@@ -182521,7 +183664,7 @@ function isIndeterminate(checked) {
 function getCheckedState(checked) {
   return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
 }
-function focusFirst$1(candidates) {
+function focusFirst(candidates) {
   const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
   for (const candidate of candidates) {
     if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
@@ -182529,14 +183672,14 @@ function focusFirst$1(candidates) {
     if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
   }
 }
-function wrapArray$1(array, startIndex) {
+function wrapArray(array, startIndex) {
   return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
 function getNextMatch(values, search, currentMatch) {
   const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
   const normalizedSearch = isRepeated ? search[0] : search;
   const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
-  let wrappedValues = wrapArray$1(values, Math.max(currentMatchIndex, 0));
+  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
   const excludeCurrentMatch = normalizedSearch.length === 1;
   if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
   const nextMatch = wrappedValues.find(
@@ -182571,9 +183714,9 @@ var Portal = MenuPortal;
 var Content2$2 = MenuContent;
 var Group = MenuGroup;
 var Label = MenuLabel;
-var Item2$2 = MenuItem;
+var Item2$1 = MenuItem;
 var CheckboxItem = MenuCheckboxItem;
-var RadioGroup$2 = MenuRadioGroup;
+var RadioGroup = MenuRadioGroup;
 var RadioItem = MenuRadioItem;
 var ItemIndicator = MenuItemIndicator;
 var Separator = MenuSeparator;
@@ -182707,7 +183850,7 @@ var DropdownMenuContent$1 = React.forwardRef(
   }
 );
 DropdownMenuContent$1.displayName = CONTENT_NAME$1;
-var GROUP_NAME$1 = "DropdownMenuGroup";
+var GROUP_NAME = "DropdownMenuGroup";
 var DropdownMenuGroup$1 = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
@@ -182715,7 +183858,7 @@ var DropdownMenuGroup$1 = React.forwardRef(
     return /* @__PURE__ */ jsx(Group, { ...menuScope, ...groupProps, ref: forwardedRef });
   }
 );
-DropdownMenuGroup$1.displayName = GROUP_NAME$1;
+DropdownMenuGroup$1.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenuLabel";
 var DropdownMenuLabel$1 = React.forwardRef(
   (props, forwardedRef) => {
@@ -182725,15 +183868,15 @@ var DropdownMenuLabel$1 = React.forwardRef(
   }
 );
 DropdownMenuLabel$1.displayName = LABEL_NAME;
-var ITEM_NAME$2 = "DropdownMenuItem";
+var ITEM_NAME = "DropdownMenuItem";
 var DropdownMenuItem$1 = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx(Item2$2, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx(Item2$1, { ...menuScope, ...itemProps, ref: forwardedRef });
   }
 );
-DropdownMenuItem$1.displayName = ITEM_NAME$2;
+DropdownMenuItem$1.displayName = ITEM_NAME;
 var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
 var DropdownMenuCheckboxItem$1 = React.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...checkboxItemProps } = props;
@@ -182741,13 +183884,13 @@ var DropdownMenuCheckboxItem$1 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
 });
 DropdownMenuCheckboxItem$1.displayName = CHECKBOX_ITEM_NAME;
-var RADIO_GROUP_NAME$1 = "DropdownMenuRadioGroup";
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
 var DropdownMenuRadioGroup$1 = React.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx(RadioGroup$2, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
 });
-DropdownMenuRadioGroup$1.displayName = RADIO_GROUP_NAME$1;
+DropdownMenuRadioGroup$1.displayName = RADIO_GROUP_NAME;
 var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
 var DropdownMenuRadioItem$1 = React.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
@@ -182755,13 +183898,13 @@ var DropdownMenuRadioItem$1 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
 });
 DropdownMenuRadioItem$1.displayName = RADIO_ITEM_NAME;
-var INDICATOR_NAME$1 = "DropdownMenuItemIndicator";
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
 var DropdownMenuItemIndicator = React.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
 });
-DropdownMenuItemIndicator.displayName = INDICATOR_NAME$1;
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME = "DropdownMenuSeparator";
 var DropdownMenuSeparator$1 = React.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...separatorProps } = props;
@@ -182820,13 +183963,13 @@ var DropdownMenuSubContent$1 = React.forwardRef((props, forwardedRef) => {
   );
 });
 DropdownMenuSubContent$1.displayName = SUB_CONTENT_NAME;
-var Root2$2 = DropdownMenu$1;
+var Root2$1 = DropdownMenu$1;
 var Trigger = DropdownMenuTrigger$1;
 var Portal2$1 = DropdownMenuPortal$1;
 var Content2$1 = DropdownMenuContent$1;
 var Group2 = DropdownMenuGroup$1;
 var Label2 = DropdownMenuLabel$1;
-var Item2$1 = DropdownMenuItem$1;
+var Item2 = DropdownMenuItem$1;
 var CheckboxItem2 = DropdownMenuCheckboxItem$1;
 var RadioGroup2 = DropdownMenuRadioGroup$1;
 var RadioItem2 = DropdownMenuRadioItem$1;
@@ -182837,7 +183980,7 @@ var SubTrigger2 = DropdownMenuSubTrigger$1;
 var SubContent2 = DropdownMenuSubContent$1;
 
 function DropdownMenu({ ...props }) {
-    return jsx(Root2$2, { "data-slot": "dropdown-menu", ...props });
+    return jsx(Root2$1, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({ ...props }) {
     return jsx(Portal2$1, { "data-slot": "dropdown-menu-portal", ...props });
@@ -182853,7 +183996,7 @@ function DropdownMenuGroup({ ...props }) {
     return jsx(Group2, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
-    return (jsx(Item2$1, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+    return (jsx(Item2, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
     return (jsxs(CheckboxItem2, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: jsx(ItemIndicator2, { children: jsx(Check, { className: "size-4" }) }) }), children] }));
@@ -182977,729 +184120,6 @@ function NotificationDropdown({ org, userId, className, onViewNotifications, })
                                     filteredNotifications.some((notification) => notification.status === 'UNREAD') && (jsxs(Fragment$1, { children: [jsx(DropdownMenuSeparator, {}), jsx("div", { className: "px-3 py-2 text-center", children: jsx(Button$1, { variant: "link", className: "text-sm text-blue-600", onClick: () => handleMarkAllAsRead(), children: t('notificationsNotificationDropdown.markAllAsRead') }) })] }))] }))] })] }) }));
 }
 
-function createCollection(name) {
-  const PROVIDER_NAME = name + "CollectionProvider";
-  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
-  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
-    PROVIDER_NAME,
-    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
-  );
-  const CollectionProvider = (props) => {
-    const { scope, children } = props;
-    const ref = React__default.useRef(null);
-    const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
-  };
-  CollectionProvider.displayName = PROVIDER_NAME;
-  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React__default.forwardRef(
-    (props, forwardedRef) => {
-      const { scope, children } = props;
-      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
-      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx(Slot$2, { ref: composedRefs, children });
-    }
-  );
-  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
-  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
-  const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React__default.forwardRef(
-    (props, forwardedRef) => {
-      const { scope, children, ...itemData } = props;
-      const ref = React__default.useRef(null);
-      const composedRefs = useComposedRefs(forwardedRef, ref);
-      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React__default.useEffect(() => {
-        context.itemMap.set(ref, { ref, ...itemData });
-        return () => void context.itemMap.delete(ref);
-      });
-      return /* @__PURE__ */ jsx(Slot$2, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
-    }
-  );
-  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
-  function useCollection(scope) {
-    const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React__default.useCallback(() => {
-      const collectionNode = context.collectionRef.current;
-      if (!collectionNode) return [];
-      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
-      const items = Array.from(context.itemMap.values());
-      const orderedItems = items.sort(
-        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
-      );
-      return orderedItems;
-    }, [context.collectionRef, context.itemMap]);
-    return getItems;
-  }
-  return [
-    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
-    useCollection,
-    createCollectionScope
-  ];
-}
-
-// packages/react/use-layout-effect/src/useLayoutEffect.tsx
-var useLayoutEffect2 = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {
-};
-
-// packages/react/id/src/id.tsx
-var useReactId = React["useId".toString()] || (() => void 0);
-var count = 0;
-function useId(deterministicId) {
-  const [id, setId] = React.useState(useReactId());
-  useLayoutEffect2(() => {
-    setId((reactId) => reactId ?? String(count++));
-  }, [deterministicId]);
-  return (id ? `radix-${id}` : "");
-}
-
-// packages/react/direction/src/Direction.tsx
-var DirectionContext = React.createContext(void 0);
-function useDirection(localDir) {
-  const globalDir = React.useContext(DirectionContext);
-  return localDir || globalDir || "ltr";
-}
-
-var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
-var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var GROUP_NAME = "RovingFocusGroup";
-var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
-var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
-  GROUP_NAME,
-  [createCollectionScope]
-);
-var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
-var RovingFocusGroup = React.forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
-  }
-);
-RovingFocusGroup.displayName = GROUP_NAME;
-var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeRovingFocusGroup,
-    orientation,
-    loop = false,
-    dir,
-    currentTabStopId: currentTabStopIdProp,
-    defaultCurrentTabStopId,
-    onCurrentTabStopIdChange,
-    onEntryFocus,
-    preventScrollOnEntryFocus = false,
-    ...groupProps
-  } = props;
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const direction = useDirection(dir);
-  const [currentTabStopId = null, setCurrentTabStopId] = useControllableState({
-    prop: currentTabStopIdProp,
-    defaultProp: defaultCurrentTabStopId,
-    onChange: onCurrentTabStopIdChange
-  });
-  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
-  const handleEntryFocus = useCallbackRef(onEntryFocus);
-  const getItems = useCollection(__scopeRovingFocusGroup);
-  const isClickFocusRef = React.useRef(false);
-  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
-  React.useEffect(() => {
-    const node = ref.current;
-    if (node) {
-      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
-      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
-    }
-  }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx(
-    RovingFocusProvider,
-    {
-      scope: __scopeRovingFocusGroup,
-      orientation,
-      dir: direction,
-      loop,
-      currentTabStopId,
-      onItemFocus: React.useCallback(
-        (tabStopId) => setCurrentTabStopId(tabStopId),
-        [setCurrentTabStopId]
-      ),
-      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
-      onFocusableItemAdd: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount + 1),
-        []
-      ),
-      onFocusableItemRemove: React.useCallback(
-        () => setFocusableItemsCount((prevCount) => prevCount - 1),
-        []
-      ),
-      children: /* @__PURE__ */ jsx(
-        Primitive$1.div,
-        {
-          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
-          "data-orientation": orientation,
-          ...groupProps,
-          ref: composedRefs,
-          style: { outline: "none", ...props.style },
-          onMouseDown: composeEventHandlers(props.onMouseDown, () => {
-            isClickFocusRef.current = true;
-          }),
-          onFocus: composeEventHandlers(props.onFocus, (event) => {
-            const isKeyboardFocus = !isClickFocusRef.current;
-            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
-              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
-              event.currentTarget.dispatchEvent(entryFocusEvent);
-              if (!entryFocusEvent.defaultPrevented) {
-                const items = getItems().filter((item) => item.focusable);
-                const activeItem = items.find((item) => item.active);
-                const currentItem = items.find((item) => item.id === currentTabStopId);
-                const candidateItems = [activeItem, currentItem, ...items].filter(
-                  Boolean
-                );
-                const candidateNodes = candidateItems.map((item) => item.ref.current);
-                focusFirst(candidateNodes, preventScrollOnEntryFocus);
-              }
-            }
-            isClickFocusRef.current = false;
-          }),
-          onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
-        }
-      )
-    }
-  );
-});
-var ITEM_NAME$1 = "RovingFocusGroupItem";
-var RovingFocusGroupItem = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeRovingFocusGroup,
-      focusable = true,
-      active = false,
-      tabStopId,
-      ...itemProps
-    } = props;
-    const autoId = useId();
-    const id = tabStopId || autoId;
-    const context = useRovingFocusContext(ITEM_NAME$1, __scopeRovingFocusGroup);
-    const isCurrentTabStop = context.currentTabStopId === id;
-    const getItems = useCollection(__scopeRovingFocusGroup);
-    const { onFocusableItemAdd, onFocusableItemRemove } = context;
-    React.useEffect(() => {
-      if (focusable) {
-        onFocusableItemAdd();
-        return () => onFocusableItemRemove();
-      }
-    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx(
-      Collection.ItemSlot,
-      {
-        scope: __scopeRovingFocusGroup,
-        id,
-        focusable,
-        active,
-        children: /* @__PURE__ */ jsx(
-          Primitive$1.span,
-          {
-            tabIndex: isCurrentTabStop ? 0 : -1,
-            "data-orientation": context.orientation,
-            ...itemProps,
-            ref: forwardedRef,
-            onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
-              if (!focusable) event.preventDefault();
-              else context.onItemFocus(id);
-            }),
-            onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
-            onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
-              if (event.key === "Tab" && event.shiftKey) {
-                context.onItemShiftTab();
-                return;
-              }
-              if (event.target !== event.currentTarget) return;
-              const focusIntent = getFocusIntent(event, context.orientation, context.dir);
-              if (focusIntent !== void 0) {
-                if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
-                event.preventDefault();
-                const items = getItems().filter((item) => item.focusable);
-                let candidateNodes = items.map((item) => item.ref.current);
-                if (focusIntent === "last") candidateNodes.reverse();
-                else if (focusIntent === "prev" || focusIntent === "next") {
-                  if (focusIntent === "prev") candidateNodes.reverse();
-                  const currentIndex = candidateNodes.indexOf(event.currentTarget);
-                  candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
-                }
-                setTimeout(() => focusFirst(candidateNodes));
-              }
-            })
-          }
-        )
-      }
-    );
-  }
-);
-RovingFocusGroupItem.displayName = ITEM_NAME$1;
-var MAP_KEY_TO_FOCUS_INTENT = {
-  ArrowLeft: "prev",
-  ArrowUp: "prev",
-  ArrowRight: "next",
-  ArrowDown: "next",
-  PageUp: "first",
-  Home: "first",
-  PageDown: "last",
-  End: "last"
-};
-function getDirectionAwareKey(key, dir) {
-  if (dir !== "rtl") return key;
-  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-function getFocusIntent(event, orientation, dir) {
-  const key = getDirectionAwareKey(event.key, dir);
-  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
-  return MAP_KEY_TO_FOCUS_INTENT[key];
-}
-function focusFirst(candidates, preventScroll = false) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-  for (const candidate of candidates) {
-    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-    candidate.focus({ preventScroll });
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-  }
-}
-function wrapArray(array, startIndex) {
-  return array.map((_, index) => array[(startIndex + index) % array.length]);
-}
-var Root = RovingFocusGroup;
-var Item = RovingFocusGroupItem;
-
-// packages/react/use-size/src/useSize.tsx
-function useSize(element) {
-  const [size, setSize] = React.useState(void 0);
-  useLayoutEffect2(() => {
-    if (element) {
-      setSize({ width: element.offsetWidth, height: element.offsetHeight });
-      const resizeObserver = new ResizeObserver((entries) => {
-        if (!Array.isArray(entries)) {
-          return;
-        }
-        if (!entries.length) {
-          return;
-        }
-        const entry = entries[0];
-        let width;
-        let height;
-        if ("borderBoxSize" in entry) {
-          const borderSizeEntry = entry["borderBoxSize"];
-          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
-          width = borderSize["inlineSize"];
-          height = borderSize["blockSize"];
-        } else {
-          width = element.offsetWidth;
-          height = element.offsetHeight;
-        }
-        setSize({ width, height });
-      });
-      resizeObserver.observe(element, { box: "border-box" });
-      return () => resizeObserver.unobserve(element);
-    } else {
-      setSize(void 0);
-    }
-  }, [element]);
-  return size;
-}
-
-// packages/react/use-previous/src/usePrevious.tsx
-function usePrevious(value) {
-  const ref = React.useRef({ value, previous: value });
-  return React.useMemo(() => {
-    if (ref.current.value !== value) {
-      ref.current.previous = ref.current.value;
-      ref.current.value = value;
-    }
-    return ref.current.previous;
-  }, [value]);
-}
-
-function useStateMachine(initialState, machine) {
-  return React.useReducer((state, event) => {
-    const nextState = machine[state][event];
-    return nextState ?? state;
-  }, initialState);
-}
-
-// packages/react/presence/src/Presence.tsx
-var Presence = (props) => {
-  const { present, children } = props;
-  const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
-  const ref = useComposedRefs(presence.ref, getElementRef(child));
-  const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
-};
-Presence.displayName = "Presence";
-function usePresence(present) {
-  const [node, setNode] = React.useState();
-  const stylesRef = React.useRef({});
-  const prevPresentRef = React.useRef(present);
-  const prevAnimationNameRef = React.useRef("none");
-  const initialState = present ? "mounted" : "unmounted";
-  const [state, send] = useStateMachine(initialState, {
-    mounted: {
-      UNMOUNT: "unmounted",
-      ANIMATION_OUT: "unmountSuspended"
-    },
-    unmountSuspended: {
-      MOUNT: "mounted",
-      ANIMATION_END: "unmounted"
-    },
-    unmounted: {
-      MOUNT: "mounted"
-    }
-  });
-  React.useEffect(() => {
-    const currentAnimationName = getAnimationName(stylesRef.current);
-    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
-  }, [state]);
-  useLayoutEffect2(() => {
-    const styles = stylesRef.current;
-    const wasPresent = prevPresentRef.current;
-    const hasPresentChanged = wasPresent !== present;
-    if (hasPresentChanged) {
-      const prevAnimationName = prevAnimationNameRef.current;
-      const currentAnimationName = getAnimationName(styles);
-      if (present) {
-        send("MOUNT");
-      } else if (currentAnimationName === "none" || styles?.display === "none") {
-        send("UNMOUNT");
-      } else {
-        const isAnimating = prevAnimationName !== currentAnimationName;
-        if (wasPresent && isAnimating) {
-          send("ANIMATION_OUT");
-        } else {
-          send("UNMOUNT");
-        }
-      }
-      prevPresentRef.current = present;
-    }
-  }, [present, send]);
-  useLayoutEffect2(() => {
-    if (node) {
-      let timeoutId;
-      const ownerWindow = node.ownerDocument.defaultView ?? window;
-      const handleAnimationEnd = (event) => {
-        const currentAnimationName = getAnimationName(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
-        if (event.target === node && isCurrentAnimation) {
-          send("ANIMATION_END");
-          if (!prevPresentRef.current) {
-            const currentFillMode = node.style.animationFillMode;
-            node.style.animationFillMode = "forwards";
-            timeoutId = ownerWindow.setTimeout(() => {
-              if (node.style.animationFillMode === "forwards") {
-                node.style.animationFillMode = currentFillMode;
-              }
-            });
-          }
-        }
-      };
-      const handleAnimationStart = (event) => {
-        if (event.target === node) {
-          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
-        }
-      };
-      node.addEventListener("animationstart", handleAnimationStart);
-      node.addEventListener("animationcancel", handleAnimationEnd);
-      node.addEventListener("animationend", handleAnimationEnd);
-      return () => {
-        ownerWindow.clearTimeout(timeoutId);
-        node.removeEventListener("animationstart", handleAnimationStart);
-        node.removeEventListener("animationcancel", handleAnimationEnd);
-        node.removeEventListener("animationend", handleAnimationEnd);
-      };
-    } else {
-      send("ANIMATION_END");
-    }
-  }, [node, send]);
-  return {
-    isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React.useCallback((node2) => {
-      if (node2) stylesRef.current = getComputedStyle(node2);
-      setNode(node2);
-    }, [])
-  };
-}
-function getAnimationName(styles) {
-  return styles?.animationName || "none";
-}
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-var RADIO_NAME = "Radio";
-var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
-var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME);
-var Radio = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeRadio,
-      name,
-      checked = false,
-      required,
-      disabled,
-      value = "on",
-      onCheck,
-      form,
-      ...radioProps
-    } = props;
-    const [button, setButton] = React.useState(null);
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
-    const hasConsumerStoppedPropagationRef = React.useRef(false);
-    const isFormControl = button ? form || !!button.closest("form") : true;
-    return /* @__PURE__ */ jsxs(RadioProvider, { scope: __scopeRadio, checked, disabled, children: [
-      /* @__PURE__ */ jsx(
-        Primitive$1.button,
-        {
-          type: "button",
-          role: "radio",
-          "aria-checked": checked,
-          "data-state": getState(checked),
-          "data-disabled": disabled ? "" : void 0,
-          disabled,
-          value,
-          ...radioProps,
-          ref: composedRefs,
-          onClick: composeEventHandlers(props.onClick, (event) => {
-            if (!checked) onCheck?.();
-            if (isFormControl) {
-              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-            }
-          })
-        }
-      ),
-      isFormControl && /* @__PURE__ */ jsx(
-        BubbleInput,
-        {
-          control: button,
-          bubbles: !hasConsumerStoppedPropagationRef.current,
-          name,
-          value,
-          checked,
-          required,
-          disabled,
-          form,
-          style: { transform: "translateX(-100%)" }
-        }
-      )
-    ] });
-  }
-);
-Radio.displayName = RADIO_NAME;
-var INDICATOR_NAME = "RadioIndicator";
-var RadioIndicator = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeRadio, forceMount, ...indicatorProps } = props;
-    const context = useRadioContext(INDICATOR_NAME, __scopeRadio);
-    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.checked, children: /* @__PURE__ */ jsx(
-      Primitive$1.span,
-      {
-        "data-state": getState(context.checked),
-        "data-disabled": context.disabled ? "" : void 0,
-        ...indicatorProps,
-        ref: forwardedRef
-      }
-    ) });
-  }
-);
-RadioIndicator.displayName = INDICATOR_NAME;
-var BubbleInput = (props) => {
-  const { control, checked, bubbles = true, ...inputProps } = props;
-  const ref = React.useRef(null);
-  const prevChecked = usePrevious(checked);
-  const controlSize = useSize(control);
-  React.useEffect(() => {
-    const input = ref.current;
-    const inputProto = window.HTMLInputElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
-    const setChecked = descriptor.set;
-    if (prevChecked !== checked && setChecked) {
-      const event = new Event("click", { bubbles });
-      setChecked.call(input, checked);
-      input.dispatchEvent(event);
-    }
-  }, [prevChecked, checked, bubbles]);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "radio",
-      "aria-hidden": true,
-      defaultChecked: checked,
-      ...inputProps,
-      tabIndex: -1,
-      ref,
-      style: {
-        ...props.style,
-        ...controlSize,
-        position: "absolute",
-        pointerEvents: "none",
-        opacity: 0,
-        margin: 0
-      }
-    }
-  );
-};
-function getState(checked) {
-  return checked ? "checked" : "unchecked";
-}
-var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
-var RADIO_GROUP_NAME = "RadioGroup";
-var [createRadioGroupContext] = createContextScope(RADIO_GROUP_NAME, [
-  createRovingFocusGroupScope,
-  createRadioScope
-]);
-var useRovingFocusGroupScope = createRovingFocusGroupScope();
-var useRadioScope = createRadioScope();
-var [RadioGroupProvider, useRadioGroupContext] = createRadioGroupContext(RADIO_GROUP_NAME);
-var RadioGroup$1 = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeRadioGroup,
-      name,
-      defaultValue,
-      value: valueProp,
-      required = false,
-      disabled = false,
-      orientation,
-      dir,
-      loop = true,
-      onValueChange,
-      ...groupProps
-    } = props;
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
-    const direction = useDirection(dir);
-    const [value, setValue] = useControllableState({
-      prop: valueProp,
-      defaultProp: defaultValue,
-      onChange: onValueChange
-    });
-    return /* @__PURE__ */ jsx(
-      RadioGroupProvider,
-      {
-        scope: __scopeRadioGroup,
-        name,
-        required,
-        disabled,
-        value,
-        onValueChange: setValue,
-        children: /* @__PURE__ */ jsx(
-          Root,
-          {
-            asChild: true,
-            ...rovingFocusGroupScope,
-            orientation,
-            dir: direction,
-            loop,
-            children: /* @__PURE__ */ jsx(
-              Primitive$1.div,
-              {
-                role: "radiogroup",
-                "aria-required": required,
-                "aria-orientation": orientation,
-                "data-disabled": disabled ? "" : void 0,
-                dir: direction,
-                ...groupProps,
-                ref: forwardedRef
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-RadioGroup$1.displayName = RADIO_GROUP_NAME;
-var ITEM_NAME = "RadioGroupItem";
-var RadioGroupItem$1 = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeRadioGroup, disabled, ...itemProps } = props;
-    const context = useRadioGroupContext(ITEM_NAME, __scopeRadioGroup);
-    const isDisabled = context.disabled || disabled;
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
-    const radioScope = useRadioScope(__scopeRadioGroup);
-    const ref = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
-    const checked = context.value === itemProps.value;
-    const isArrowKeyPressedRef = React.useRef(false);
-    React.useEffect(() => {
-      const handleKeyDown = (event) => {
-        if (ARROW_KEYS.includes(event.key)) {
-          isArrowKeyPressedRef.current = true;
-        }
-      };
-      const handleKeyUp = () => isArrowKeyPressedRef.current = false;
-      document.addEventListener("keydown", handleKeyDown);
-      document.addEventListener("keyup", handleKeyUp);
-      return () => {
-        document.removeEventListener("keydown", handleKeyDown);
-        document.removeEventListener("keyup", handleKeyUp);
-      };
-    }, []);
-    return /* @__PURE__ */ jsx(
-      Item,
-      {
-        asChild: true,
-        ...rovingFocusGroupScope,
-        focusable: !isDisabled,
-        active: checked,
-        children: /* @__PURE__ */ jsx(
-          Radio,
-          {
-            disabled: isDisabled,
-            required: context.required,
-            checked,
-            ...radioScope,
-            ...itemProps,
-            name: context.name,
-            ref: composedRefs,
-            onCheck: () => context.onValueChange(itemProps.value),
-            onKeyDown: composeEventHandlers((event) => {
-              if (event.key === "Enter") event.preventDefault();
-            }),
-            onFocus: composeEventHandlers(itemProps.onFocus, () => {
-              if (isArrowKeyPressedRef.current) ref.current?.click();
-            })
-          }
-        )
-      }
-    );
-  }
-);
-RadioGroupItem$1.displayName = ITEM_NAME;
-var INDICATOR_NAME2 = "RadioGroupIndicator";
-var RadioGroupIndicator = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeRadioGroup, ...indicatorProps } = props;
-    const radioScope = useRadioScope(__scopeRadioGroup);
-    return /* @__PURE__ */ jsx(RadioIndicator, { ...radioScope, ...indicatorProps, ref: forwardedRef });
-  }
-);
-RadioGroupIndicator.displayName = INDICATOR_NAME2;
-var Root2$1 = RadioGroup$1;
-var Item2 = RadioGroupItem$1;
-var Indicator = RadioGroupIndicator;
-
-function RadioGroup({ className, ...props }) {
-    return (jsx(Root2$1, { "data-slot": "radio-group", className: cn('grid gap-3', className), ...props }));
-}
-function RadioGroupItem({ className, ...props }) {
-    return (jsx(Item2, { "data-slot": "radio-group-item", className: cn('border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: jsx(Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: jsx(Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
-}
-
 function SendNotificationDialog({ open, onOpenChange, tenant, onNotificationSent, hasManageUsersPermission = false, }) {
     const t = useT();
     const [recipientType, setRecipientType] = useState('users');
@@ -183951,7 +184371,7 @@ function SendNotificationDialog({ open, onOpenChange, tenant, onNotificationSent
                                                 })] }), jsxs("div", { className: "space-y-2", children: [jsx(Label$2, { htmlFor: "notification-body", className: "text-sm font-medium", "aria-required": "true", children: t('notificationsSendNotificationDialog.contentLabel') }), form.Field({
                                                     name: 'message',
                                                     children: (field) => (jsx("div", { role: "group", "aria-labelledby": "notification-body", "data-testid": "notification-body-group", children: jsx(RichTextEditor, { value: field.state.value, onChange: field.handleChange, placeholder: t('notificationsSendNotificationDialog.contentPlaceholder'), minHeight: "180px", exportFormat: "html" }) })),
-                                                })] }), jsxs("fieldset", { className: "space-y-3", "data-testid": "send-time-fieldset", children: [jsx("legend", { className: "text-sm font-medium", children: t('notificationsSendNotificationDialog.sendTimeLegend') }), jsxs(RadioGroup, { value: sendType, onValueChange: (value) => setSendType(value), "aria-label": t('notificationsSendNotificationDialog.sendTimeAriaLabel'), "data-testid": "send-time-radio-group", children: [jsxs("div", { className: "flex items-center space-x-2 mt-2", children: [jsx(RadioGroupItem, { value: "now", id: "send-now", "aria-label": t('notificationsSendNotificationDialog.sendImmediately'), "data-testid": "send-now-radio" }), jsx(Label$2, { htmlFor: "send-now", className: "font-normal cursor-pointer", children: t('notificationsSendNotificationDialog.sendImmediately') })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(RadioGroupItem, { value: "schedule", id: "send-schedule", "aria-label": t('notificationsSendNotificationDialog.scheduleForLater'), "data-testid": "send-schedule-radio" }), jsx(Label$2, { htmlFor: "send-schedule", className: "font-normal cursor-pointer", children: t('notificationsSendNotificationDialog.scheduleForLater') })] })] }), sendType === 'schedule' && (jsxs("div", { className: "flex gap-3 mt-4 pl-6", role: "group", "aria-label": t('notificationsSendNotificationDialog.scheduleSettingsAriaLabel'), "data-testid": "schedule-settings", children: [jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button$1, { type: "button", variant: "outline", className: cn('justify-start text-left font-normal min-w-[200px]', !scheduledDate && 'text-muted-foreground'), "aria-label": scheduledDate
+                                                })] }), jsxs("fieldset", { className: "space-y-3", "data-testid": "send-time-fieldset", children: [jsx("legend", { className: "text-sm font-medium", children: t('notificationsSendNotificationDialog.sendTimeLegend') }), jsxs(RadioGroup$1, { value: sendType, onValueChange: (value) => setSendType(value), "aria-label": t('notificationsSendNotificationDialog.sendTimeAriaLabel'), "data-testid": "send-time-radio-group", children: [jsxs("div", { className: "flex items-center space-x-2 mt-2", children: [jsx(RadioGroupItem, { value: "now", id: "send-now", "aria-label": t('notificationsSendNotificationDialog.sendImmediately'), "data-testid": "send-now-radio" }), jsx(Label$2, { htmlFor: "send-now", className: "font-normal cursor-pointer", children: t('notificationsSendNotificationDialog.sendImmediately') })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(RadioGroupItem, { value: "schedule", id: "send-schedule", "aria-label": t('notificationsSendNotificationDialog.scheduleForLater'), "data-testid": "send-schedule-radio" }), jsx(Label$2, { htmlFor: "send-schedule", className: "font-normal cursor-pointer", children: t('notificationsSendNotificationDialog.scheduleForLater') })] })] }), sendType === 'schedule' && (jsxs("div", { className: "flex gap-3 mt-4 pl-6", role: "group", "aria-label": t('notificationsSendNotificationDialog.scheduleSettingsAriaLabel'), "data-testid": "schedule-settings", children: [jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button$1, { type: "button", variant: "outline", className: cn('justify-start text-left font-normal min-w-[200px]', !scheduledDate && 'text-muted-foreground'), "aria-label": scheduledDate
                                                                             ? t('notificationsSendNotificationDialog.selectedDateAriaLabel', {
                                                                                 date: format$1(scheduledDate, 'PPP'),
                                                                             })
@@ -183965,7 +184385,7 @@ function SendNotificationDialog({ open, onOpenChange, tenant, onNotificationSent
                                                                 : t('notificationsSendNotificationDialog.groupsSelected', {
                                                                     count: selectedGroups.length,
                                                                     plural: selectedGroups.length !== 1 ? 's' : '',
-                                                                }) })] }), jsxs(RadioGroup, { value: recipientType, onValueChange: (value) => {
+                                                                }) })] }), jsxs(RadioGroup$1, { value: recipientType, onValueChange: (value) => {
                                                         setRecipientType(value);
                                                         setSearchQuery('');
                                                     }, className: "flex gap-4", "aria-label": t('notificationsSendNotificationDialog.recipientTypeAriaLabel'), "data-testid": "recipient-type-radio-group", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(RadioGroupItem, { value: "users", id: "recipient-users", "aria-label": t('notificationsSendNotificationDialog.sendToUsers'), "data-testid": "recipient-users-radio" }), jsxs(Label$2, { htmlFor: "recipient-users", className: "font-normal cursor-pointer flex items-center gap-1.5", children: [jsx(Users, { className: "h-4 w-4", "aria-hidden": "true" }), t('notificationsSendNotificationDialog.usersLabel')] })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(RadioGroupItem, { value: "groups", id: "recipient-groups", "aria-label": t('notificationsSendNotificationDialog.sendToGroups'), "data-testid": "recipient-groups-radio" }), jsxs(Label$2, { htmlFor: "recipient-groups", className: "font-normal cursor-pointer flex items-center gap-1.5", children: [jsx(UsersRound, { className: "h-4 w-4", "aria-hidden": "true" }), t('notificationsSendNotificationDialog.groupsLabel')] })] })] }), jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500", "aria-hidden": "true" }), jsx(Input, { placeholder: recipientType === 'users'
@@ -233915,7 +234335,7 @@ function ApplicationFormSteps({ form, platformKey, formId, shell, submission, to
             return (jsxs("div", { className: "flex items-start gap-2.5", children: [jsx(Checkbox, { id: id, checked: val === true, onCheckedChange: (c) => set(c === true), className: "mt-0.5" }), jsxs(Label$2, { htmlFor: id, className: "text-sm font-normal leading-snug", children: [f.label, req] })] }, f.key));
         }
         if (f.type === 'select' && ((_b = f.ui) === null || _b === void 0 ? void 0 : _b.widget) === 'radio') {
-            return (jsxs("div", { className: "grid gap-2", children: [jsxs("span", { className: "text-sm font-medium", children: [f.label, req] }), jsx(RadioGroup, { value: (_c = val) !== null && _c !== void 0 ? _c : '', onValueChange: set, className: "gap-2", children: (_d = f.options) === null || _d === void 0 ? void 0 : _d.map((o) => (jsxs("div", { className: "flex items-center gap-2", children: [jsx(RadioGroupItem, { id: `${id}-${o.value}`, value: o.value }), jsx(Label$2, { htmlFor: `${id}-${o.value}`, className: "text-sm font-normal", children: o.label })] }, o.value))) })] }, f.key));
+            return (jsxs("div", { className: "grid gap-2", children: [jsxs("span", { className: "text-sm font-medium", children: [f.label, req] }), jsx(RadioGroup$1, { value: (_c = val) !== null && _c !== void 0 ? _c : '', onValueChange: set, className: "gap-2", children: (_d = f.options) === null || _d === void 0 ? void 0 : _d.map((o) => (jsxs("div", { className: "flex items-center gap-2", children: [jsx(RadioGroupItem, { id: `${id}-${o.value}`, value: o.value }), jsx(Label$2, { htmlFor: `${id}-${o.value}`, className: "text-sm font-normal", children: o.label })] }, o.value))) })] }, f.key));
         }
         if (f.type === 'select') {
             return (jsxs("div", { className: "grid gap-1.5", children: [jsxs(Label$2, { htmlFor: id, className: "text-sm font-medium", children: [f.label, req] }), jsxs(Select$1, { value: (_e = val) !== null && _e !== void 0 ? _e : '', onValueChange: set, children: [jsx(SelectTrigger, { id: id, children: jsx(SelectValue, { placeholder: t('applyApplyWizard.selectAnOption') }) }), jsx(SelectContent, { children: (_f = f.options) === null || _f === void 0 ? void 0 : _f.map((o) => (jsx(SelectItem, { value: o.value, children: o.label }, o.value))) })] })] }, f.key));