synapse-react-client 3.3.6 → 3.3.7

package/dist/umd/synapse-react-client.development.js

@@ -20,7 +20,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     return __privateGet(obj, member, getter);
   }
 });
-/*! SRC v3.3.6 */
+/*! SRC v3.3.7 */
 
   var _focused, _cleanup, _setup, _a2, _online, _cleanup2, _setup2, _b, _gcTimeout, _c, _initialState, _revertState, _cache, _promise, _retryer, _observers, _defaultOptions, _abortSignalConsumed, _Query_instances, setOptions_fn, dispatch_fn, _d, _queries, _e2, _observers2, _defaultOptions2, _mutationCache, _retryer2, _Mutation_instances, dispatch_fn2, _f, _mutations, _mutationId, _resuming, _g, _queryCache, _mutationCache2, _defaultOptions3, _queryDefaults, _mutationDefaults, _mountCount, _unsubscribeFocus, _unsubscribeOnline, _h, _client, _currentQuery, _currentQueryInitialState, _currentResult, _currentResultState, _currentResultOptions, _selectError, _selectFn, _selectResult, _lastQueryWithDefinedData, _staleTimeoutId, _refetchIntervalId, _currentRefetchInterval, _trackedProps, _QueryObserver_instances, executeFetch_fn, updateStaleTimeout_fn, computeRefetchInterval_fn, updateRefetchInterval_fn, updateTimers_fn, clearStaleTimeout_fn, clearRefetchInterval_fn, updateQuery_fn, notify_fn, _i, _client2, _result, _queries2, _observers3, _options, _combinedResult, _QueriesObserver_instances, setResult_fn, combineResult_fn, findMatchingObservers_fn, onUpdate_fn, notify_fn2, _j, _client3, _currentResult2, _currentMutation, _mutateOptions, _MutationObserver_instances, updateResult_fn, notify_fn3, _k, _l;
   function _interopNamespaceDefault(e2) {
@@ -7647,7 +7647,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     const functionName = getFunctionComponentName(innerType);
     return outerType.displayName || (functionName !== "" ? `${wrapperName}(${functionName})` : wrapperName);
   }
-  function getDisplayName$2(Component) {
+  function getDisplayName$3(Component) {
     if (Component == null) {
       return void 0;
     }
@@ -7669,9 +7669,9 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     }
     return void 0;
   }
-  const getDisplayName$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  const getDisplayName$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: getDisplayName$2,
+    default: getDisplayName$3,
     getFunctionName
   }, Symbol.toStringTag, { value: "Module" }));
   const _excluded$24 = ["ownerState"], _excluded2$k = ["variants"], _excluded3$8 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
@@ -7866,7 +7866,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
             displayName = `${componentName}${capitalize$1(componentSlot || "")}`;
           }
           if (displayName === void 0) {
-            displayName = `Styled(${getDisplayName$2(tag)})`;
+            displayName = `Styled(${getDisplayName$3(tag)})`;
           }
           Component.displayName = displayName;
         }
@@ -9872,7 +9872,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   const require$$1 = /* @__PURE__ */ getAugmentedNamespace(styledEngine);
   const require$$4 = /* @__PURE__ */ getAugmentedNamespace(deepmerge);
   const require$$5 = /* @__PURE__ */ getAugmentedNamespace(capitalize);
-  const require$$6 = /* @__PURE__ */ getAugmentedNamespace(getDisplayName$1);
+  const require$$6 = /* @__PURE__ */ getAugmentedNamespace(getDisplayName$2);
   const require$$7 = /* @__PURE__ */ getAugmentedNamespace(createTheme$2);
   const require$$8 = /* @__PURE__ */ getAugmentedNamespace(styleFunctionSx);
   var _interopRequireDefault$c = interopRequireDefaultExports;
@@ -39915,6 +39915,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   }) => {
     return result.isError && !errorResetBoundary.isReset() && !result.isFetching && query && shouldThrowError(throwOnError, [result.error, query]);
   };
+  var defaultThrowOnError = (_error, query) => typeof query.state.data === "undefined";
   var ensureStaleTime = (defaultedOptions) => {
     if (defaultedOptions.suspense) {
       if (typeof defaultedOptions.staleTime !== "number") {
@@ -40063,6 +40064,17 @@ Please use another name.` : formatMuiErrorMessage$1(18));
   function useQuery(options2, queryClient) {
     return useBaseQuery(options2, QueryObserver);
   }
+  function useSuspenseQuery(options2, queryClient) {
+    return useBaseQuery(
+      {
+        ...options2,
+        enabled: true,
+        suspense: true,
+        throwOnError: defaultThrowOnError
+      },
+      QueryObserver
+    );
+  }
   function useMutation(options2, queryClient) {
     const client = useQueryClient();
     const [observer] = React__namespace.useState(
@@ -40705,6 +40717,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     FeatureFlagEnum2["DESCRIPTION_FIELD"] = "DESCRIPTION_FIELD";
     FeatureFlagEnum2["VIRTUALTABLE_SUPPORT"] = "VIRTUALTABLE_SUPPORT";
     FeatureFlagEnum2["JSONSCHEMA_VALIDATION_STATUS"] = "JSONSCHEMA_VALIDATION_STATUS";
+    FeatureFlagEnum2["REACT_ENTITY_ACL_EDITOR"] = "REACT_ENTITY_ACL_EDITOR";
     return FeatureFlagEnum2;
   })(FeatureFlagEnum || {});
   var S3_FILE_HANDLE_CONCRETE_TYPE_VALUE = "org.sagebionetworks.repo.model.file.S3FileHandle";
@@ -46405,7 +46418,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     lightPrimary: { ...generatePalette("#f8f9fa"), contrastText: "#164B6E" },
     light: { ...generatePalette("#f8f9fa"), contrastText: "#22252a" },
     // grey-1000
-    success: { main: "#32a330" },
+    success: { main: "#32a330", contrastText: "#ffffff" },
     info: { main: "#017fa5" },
     warning: { main: "#cc9f00" },
     error: { main: "#c13415" },
@@ -49514,6 +49527,44 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       } else return void 0;
     }
   }
+  function useGetEntityBundleQueryOptions(entityId, version2, bundleRequest = ALL_ENTITY_BUNDLE_FIELDS) {
+    const { accessToken, keyFactory } = useSynapseContext();
+    return {
+      queryKey: keyFactory.getEntityBundleQueryKey(
+        entityId,
+        version2,
+        bundleRequest
+      ),
+      queryFn: () => SynapseClient.getEntityBundleV2(
+        entityId,
+        bundleRequest,
+        version2,
+        accessToken
+      )
+    };
+  }
+  function useGetEntityBundle(entityId, version2, bundleRequest = ALL_ENTITY_BUNDLE_FIELDS, options2) {
+    const queryOptions = useGetEntityBundleQueryOptions(
+      entityId,
+      version2,
+      bundleRequest
+    );
+    return useQuery({
+      ...options2,
+      ...queryOptions
+    });
+  }
+  function useSuspenseGetEntityBundle(entityId, version2, bundleRequest = ALL_ENTITY_BUNDLE_FIELDS, options2) {
+    const queryOptions = useGetEntityBundleQueryOptions(
+      entityId,
+      version2,
+      bundleRequest
+    );
+    return useSuspenseQuery({
+      ...options2,
+      ...queryOptions
+    });
+  }
   function useGetEntity(entityId, versionNumber, options2) {
     const { accessToken, keyFactory } = useSynapseContext();
     return useQuery({
@@ -49735,6 +49786,37 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       queryFn: () => SynapseClient.getEntityPermissions(entityId, accessToken)
     });
   }
+  const onMutateEntityAclSuccess = async (entityId, updatedACL, queryClient, keyFactory) => {
+    const entityAclQueryKey = keyFactory.getEntityACLQueryKey(entityId);
+    if (updatedACL) {
+      queryClient.setQueryData(entityAclQueryKey, updatedACL);
+    }
+    await invalidateAllQueriesForEntity(
+      queryClient,
+      keyFactory,
+      entityId,
+      entityAclQueryKey
+    );
+  };
+  function useCreateEntityACL(options2) {
+    const queryClient = useQueryClient();
+    const { accessToken, keyFactory } = useSynapseContext();
+    return useMutation({
+      ...options2,
+      mutationFn: (acl) => SynapseClient.createEntityACL(acl, accessToken),
+      onSuccess: async (updatedACL, variables, ctx) => {
+        await onMutateEntityAclSuccess(
+          updatedACL.id,
+          updatedACL,
+          queryClient,
+          keyFactory
+        );
+        if (options2 == null ? void 0 : options2.onSuccess) {
+          await options2.onSuccess(updatedACL, variables, ctx);
+        }
+      }
+    });
+  }
   function useUpdateEntityACL(options2) {
     const queryClient = useQueryClient();
     const { accessToken, keyFactory } = useSynapseContext();
@@ -49742,13 +49824,11 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       ...options2,
       mutationFn: (acl) => SynapseClient.updateEntityACL(acl, accessToken),
       onSuccess: async (updatedACL, variables, ctx) => {
-        const entityAclQueryKey = keyFactory.getEntityACLQueryKey(updatedACL.id);
-        queryClient.setQueryData(entityAclQueryKey, updatedACL);
-        await invalidateAllQueriesForEntity(
-          queryClient,
-          keyFactory,
+        await onMutateEntityAclSuccess(
           updatedACL.id,
-          entityAclQueryKey
+          updatedACL,
+          queryClient,
+          keyFactory
         );
         if (options2 == null ? void 0 : options2.onSuccess) {
           await options2.onSuccess(updatedACL, variables, ctx);
@@ -49756,6 +49836,40 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       }
     });
   }
+  function useDeleteEntityACL(options2) {
+    const queryClient = useQueryClient();
+    const { accessToken, keyFactory } = useSynapseContext();
+    return useMutation({
+      ...options2,
+      mutationFn: (entityId) => SynapseClient.deleteEntityACL(entityId, accessToken),
+      onSuccess: async (result, entityId, ctx) => {
+        await onMutateEntityAclSuccess(entityId, null, queryClient, keyFactory);
+        if (options2 == null ? void 0 : options2.onSuccess) {
+          await options2.onSuccess(result, entityId, ctx);
+        }
+      }
+    });
+  }
+  function useGetEntityBenefactorACLQueryOptions(entityId) {
+    const opts = useGetEntityBundleQueryOptions(
+      entityId,
+      void 0,
+      {
+        includeBenefactorACL: true
+      }
+    );
+    return {
+      ...opts,
+      select: (data) => data.benefactorAcl
+    };
+  }
+  function useSuspenseGetEntityBenefactorACL(entityId, options2) {
+    const queryOptions = useGetEntityBenefactorACLQueryOptions(entityId);
+    return useSuspenseQuery({
+      ...options2,
+      ...queryOptions
+    });
+  }
   function useUpdateTableColumns(options2) {
     const queryClient = useQueryClient();
     const { accessToken, keyFactory } = useSynapseContext();
@@ -49798,23 +49912,6 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       queryFn: () => SynapseClient.getSchemaValidationResults(entityId, accessToken)
     });
   }
-  function useGetEntityBundle(entityId, version2, bundleRequest = ALL_ENTITY_BUNDLE_FIELDS, options2) {
-    const { accessToken, keyFactory } = useSynapseContext();
-    return useQuery({
-      ...options2,
-      queryKey: keyFactory.getEntityBundleQueryKey(
-        entityId,
-        version2,
-        bundleRequest
-      ),
-      queryFn: () => SynapseClient.getEntityBundleV2(
-        entityId,
-        bundleRequest,
-        version2,
-        accessToken
-      )
-    });
-  }
   function useGetEntityActionsRequired(entityId, options2) {
     const { accessToken, keyFactory } = useSynapseContext();
     return useQuery({
@@ -50982,12 +51079,14 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     useCreateAccessRequirement,
     useCreateAccessRequirementACL,
     useCreateEntity,
+    useCreateEntityACL,
     useCreateLockAccessRequirement,
     useCreateOAuthClient,
     useCreateTeam,
     useCreateWikiPage,
     useDeleteAccessRequirementACL,
     useDeleteEntity,
+    useDeleteEntityACL,
     useDeleteOAuthClient,
     useDeleteTeamMembership,
     useDisableTwoFactorAuth,
@@ -51018,6 +51117,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     useGetEntityActionsRequired,
     useGetEntityAlias,
     useGetEntityBundle,
+    useGetEntityBundleQueryOptions,
     useGetEntityChallenge,
     useGetEntityChildren,
     useGetEntityChildrenInfinite,
@@ -51091,6 +51191,9 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     useSortAccessRequirementIdsByCompletion,
     useStartTwoFactorEnrollment,
     useSubmitDataAccessRequest,
+    useSuspenseGetCurrentUserProfile,
+    useSuspenseGetEntityBenefactorACL,
+    useSuspenseGetEntityBundle,
     useUpdateAccessRequirement,
     useUpdateAccessRequirementACL,
     useUpdateDataAccessRequest,
@@ -53864,6 +53967,14 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     );
     return batchResult.results[0];
   };
+  const createEntityACL = (acl, accessToken = void 0) => {
+    return doPost(
+      ENTITY_ACL(acl.id),
+      acl,
+      accessToken,
+      BackendDestinationEnum.REPO_ENDPOINT
+    );
+  };
   const updateEntityACL = (acl, accessToken = void 0) => {
     return doPut(
       ENTITY_ACL(acl.id),
@@ -53872,6 +53983,13 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       BackendDestinationEnum.REPO_ENDPOINT
     );
   };
+  const deleteEntityACL = (id2, accessToken = void 0) => {
+    return doDelete(
+      ENTITY_ACL(id2),
+      accessToken,
+      BackendDestinationEnum.REPO_ENDPOINT
+    );
+  };
   const updateEntity = (entity2, accessToken = void 0, newVersion) => {
     let url = `/repo/v1/entity/${entity2.id}`;
     if (newVersion) url += "?newVersion=true";
@@ -56020,6 +56138,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     createAccessRequirementAcl,
     createColumnModels,
     createEntity,
+    createEntityACL,
     createEvaluation,
     createEvaluationRound,
     createFormData,
@@ -56043,6 +56162,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     deleteDownloadListFiles,
     deleteEmail,
     deleteEntity,
+    deleteEntityACL,
     deleteEvaluation,
     deleteEvaluationRound,
     deleteFormData,
@@ -56269,13 +56389,26 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       queryFn: () => SynapseClient.getNotificationEmail(accessToken)
     });
   }
-  function useGetCurrentUserProfile(options2) {
+  function useGetCurrentUserProfileQueryOptions() {
     const { accessToken, keyFactory } = useSynapseContext();
     const queryKey = keyFactory.getCurrentUserProfileQueryKey();
-    return useQuery({
-      ...options2,
+    return {
       queryKey,
       queryFn: () => SynapseClient.getUserProfile(accessToken)
+    };
+  }
+  function useGetCurrentUserProfile(options2) {
+    const queryOptions = useGetCurrentUserProfileQueryOptions();
+    return useQuery({
+      ...options2,
+      ...queryOptions
+    });
+  }
+  function useSuspenseGetCurrentUserProfile(options2) {
+    const queryOptions = useGetCurrentUserProfileQueryOptions();
+    return useSuspenseQuery({
+      ...options2,
+      ...queryOptions
     });
   }
   const ALL_USER_BUNDLE_FIELDS = USER_BUNDLE_MASK_USER_PROFILE | USER_BUNDLE_MASK_ORCID | USER_BUNDLE_MASK_VERIFICATION_SUBMISSION | USER_BUNDLE_MASK_IS_CERTIFIED | USER_BUNDLE_MASK_IS_VERIFIED | USER_BUNDLE_MASK_IS_ACT_MEMBER | USER_BUNDLE_MASK_IS_AR_REVIEWER;
@@ -93763,11 +93896,16 @@ ${e2.message}`);
     return queryRequestClone;
   }
   function useTableQueryReducer(initQueryRequest, requireConfirmationOnChange, onQueryChange) {
+    const [resetDebounceCounter, setResetDebounceCounter] = React$2.useState(0);
     const [commitAfterDebounce, setCommitAfterDebounce] = React$2.useState(false);
     const [state, dispatch2] = React$2.useReducer(
       (prevState, action) => {
         let updatedNextQueryRequest = prevState.nextQueryRequest;
         switch (action.type) {
+          case "resetDebounce": {
+            setResetDebounceCounter((v2) => v2 + 1);
+            return prevState;
+          }
           case "setQuery": {
             updatedNextQueryRequest = getQueryFromSetStateAction(
               action,
@@ -93896,15 +94034,27 @@ ${e2.message}`);
         }
       },
       // nextQueryRequest MUST be included in the dependencies to ensure the debounce resets when it changes
-      [state.nextQueryRequest, commitAfterDebounce, setCommitAfterDebounce],
+      [
+        state.nextQueryRequest,
+        commitAfterDebounce,
+        setCommitAfterDebounce,
+        resetDebounceCounter
+      ],
       DEBOUNCE_DELAY_MS
     );
-    return {
-      currentQueryRequest: state.currentQueryRequest,
-      nextQueryRequest: state.nextQueryRequest,
-      isConfirmingChange: state.isConfirmingChange,
-      dispatch: dispatch2
-    };
+    return React$2.useMemo(
+      () => ({
+        currentQueryRequest: state.currentQueryRequest,
+        nextQueryRequest: state.nextQueryRequest,
+        isConfirmingChange: state.isConfirmingChange,
+        dispatch: dispatch2
+      }),
+      [
+        state.currentQueryRequest,
+        state.isConfirmingChange,
+        state.nextQueryRequest
+      ]
+    );
   }
   const DEBOUNCE_DELAY_MS = 750;
   function useImmutableTableQuery(options2) {
@@ -94081,9 +94231,13 @@ ${e2.message}`);
     const commitChanges = React$2.useCallback(() => {
       dispatch2({ type: "commitChanges" });
     }, [dispatch2]);
+    const resetDebounceTimer = React$2.useCallback(() => {
+      dispatch2({ type: "resetDebounce" });
+    }, [dispatch2]);
     return {
       entityId,
       commitChanges,
+      resetDebounceTimer,
       currentQueryRequest,
       nextQueryRequest,
       versionNumber,
@@ -94335,7 +94489,8 @@ ${e2.message}`);
       nextQueryRequest,
       currentQueryRequest,
       addValueToSelectedFacet: addValueToSelectedFacet2,
-      setRangeFacetValue: setRangeFacetValue2
+      setRangeFacetValue: setRangeFacetValue2,
+      resetDebounceTimer
     } = immutableTableQueryResult;
     const lastQueryRequest = React$2.useMemo(() => {
       return getCurrentQueryRequest();
@@ -94437,6 +94592,7 @@ ${e2.message}`);
       addValueToSelectedFacet: addValueToSelectedFacet2,
       combineRangeFacetConfig,
       setRangeFacetValue: setRangeFacetValue2,
+      resetDebounceTimer,
       ...paginationControls
     });
     const { children: children2 } = props;
@@ -104575,23 +104731,25 @@ ${e2.message}`);
     }, baseSelectProps));
   });
   var StateManagedSelect$1 = StateManagedSelect;
+  const AUTHENTICATED_GROUP_DISPLAY_TEXT = "All registered Synapse users";
+  const PUBLIC_GROUP_DISPLAY_TEXT = "Anyone on the web";
   function TeamBadge(props) {
     const { teamId } = props;
     let { teamName, disableHref } = props;
     let icon = "team";
     if (teamId == AUTHENTICATED_PRINCIPAL_ID) {
       icon = "public";
-      teamName = "All registered Synapse users";
+      teamName = AUTHENTICATED_GROUP_DISPLAY_TEXT;
       disableHref = true;
     }
     if (teamId == PUBLIC_PRINCIPAL_ID) {
       icon = "public";
-      teamName = "Anyone on the web";
+      teamName = PUBLIC_GROUP_DISPLAY_TEXT;
       disableHref = true;
     }
-    const Tag = disableHref ? "span" : "a";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(IconSvg, { icon }),
+    const Tag = disableHref ? "span" : Link;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { component: "span", display: "inline-flex", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconSvg, { icon, fontSize: "small" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Tag,
         {
@@ -109449,7 +109607,7 @@ ${e2.message}`);
       addValueToSelectedFacet: addValueToSelectedFacet2,
       removeSelectedFacet: removeSelectedFacet2,
       removeValueFromSelectedFacet: removeValueFromSelectedFacet2,
-      executeQueryRequest
+      resetDebounceTimer
     } = useQueryContext();
     const data = useAtomValue(tableQueryDataAtom);
     const { getColumnDisplayName } = useQueryVisualizationContext();
@@ -109534,12 +109692,7 @@ ${e2.message}`);
         dropdownType,
         hideCollapsible,
         onHoverOverValue: () => {
-          executeQueryRequest(
-            (request) => {
-              return cloneDeep$3(request);
-            },
-            { debounce: true }
-          );
+          resetDebounceTimer();
         },
         onAddValueToSelection: (value) => {
           addValueToSelectedFacet2(
@@ -115981,6 +116134,948 @@ ${e2.message}`);
       )
     ] });
   };
+  const OpenDataContainer = styled(Box, {
+    label: "OpenDataContainer"
+  })(({ theme: theme3 }) => ({
+    background: theme3.palette.grey[100],
+    padding: `${theme3.spacing(2.5)} ${theme3.spacing(4)}`,
+    border: `1px solid ${theme3.palette.grey[300]}`,
+    borderRadius: "3px",
+    marginBottom: theme3.spacing(2)
+  }));
+  function OpenData(props) {
+    const { isOpenData, isPublic: isPublic2, currentUserCanUpdateSharingSettings } = props;
+    if (isOpenData && isPublic2) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(OpenDataContainer, { display: "flex", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(IconSvg, { icon: "checkCircle", color: "success", wrap: false }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", color: "text.secondary", children: /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "This is anonymous access data." }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", color: "text.secondary", children: "Anyone can download it, even if they aren’t logged in to Synapse." })
+        ] })
+      ] });
+    } else if (isOpenData && !isPublic2 && currentUserCanUpdateSharingSettings) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(OpenDataContainer, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", color: "text.secondary", children: /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "This is not anonymous access data." }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", color: "text.secondary", children: "You must grant public access for all users to be able to anonymously download it." })
+      ] });
+    } else if (!isOpenData && isPublic2 && currentUserCanUpdateSharingSettings) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(OpenDataContainer, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", color: "text.secondary", children: /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Users must be logged in to download public access data." }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", color: "text.secondary", children: "This data is publicly viewable, but only registered and logged-in users can download it." })
+      ] });
+    }
+    return null;
+  }
+  const CUSTOM_VALUE = "CUSTOM";
+  const CUSTOM_TEXT = "Custom";
+  const PermissionLevelMenu = (props) => {
+    const { currentAccessType, availablePermissionLevels: availablePermissionLevels2, onChange } = props;
+    const selectedPermissionLevel = getPermissionLevelFromAccessType(currentAccessType);
+    const isCustomPermissionSelected = selectedPermissionLevel == null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      TextField$1,
+      {
+        value: isCustomPermissionSelected ? CUSTOM_VALUE : selectedPermissionLevel,
+        onChange: (e2) => {
+          const accessType = getAccessTypeFromPermissionLevel(
+            e2.target.value
+          );
+          onChange(accessType || currentAccessType);
+        },
+        fullWidth: true,
+        select: true,
+        SelectProps: {
+          renderValue: (selected) => {
+            if (selected == CUSTOM_VALUE) {
+              return CUSTOM_TEXT;
+            }
+            return permissionLevelToLabel[selected];
+          }
+        },
+        size: "small",
+        children: [
+          Object.values(availablePermissionLevels2).map((permissionLevel) => {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: permissionLevel, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", noWrap: true, children: permissionLevelToLabel[permissionLevel] }) }, permissionLevel);
+          }),
+          isCustomPermissionSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: CUSTOM_VALUE, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", noWrap: true, children: CUSTOM_TEXT }) })
+        ]
+      }
+    );
+  };
+  function ReadOnlyPermissionLevel(props) {
+    const { accessType } = props;
+    return permissionLevelToLabel[getPermissionLevelFromAccessType(accessType)] || "Custom";
+  }
+  const REMOVE_BUTTON_LABEL = "Remove from AR Permissions";
+  const ResourceAccessItem = (props) => {
+    const {
+      resourceAccess,
+      availablePermissionLevels: availablePermissionLevels2,
+      canChangePermission,
+      showDeleteButton,
+      onChange,
+      onRemove: onRemove2,
+      displayedPermissionLevelOverride
+    } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Stack$6,
+      {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: "10px",
+        py: "6px",
+        role: "row",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { fontSize: "16px", lineHeight: "20px", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UserOrTeamBadge, { principalId: resourceAccess.principalId }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Stack$6,
+            {
+              direction: "row",
+              gap: "10px",
+              alignItems: "center",
+              width: "200px",
+              flexShrink: 0,
+              children: [
+                canChangePermission ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  PermissionLevelMenu,
+                  {
+                    currentAccessType: resourceAccess.accessType,
+                    availablePermissionLevels: availablePermissionLevels2,
+                    onChange
+                  }
+                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", flexGrow: 1, children: displayedPermissionLevelOverride ?? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ReadOnlyPermissionLevel,
+                  {
+                    accessType: resourceAccess.accessType
+                  }
+                ) }),
+                showDeleteButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  IconSvgButton,
+                  {
+                    "aria-label": REMOVE_BUTTON_LABEL,
+                    onClick: () => onRemove2(),
+                    icon: "delete",
+                    sx: {
+                      "&:hover": {
+                        color: "error.main"
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  };
+  const SkeletonParagraph = ({
+    numRows = 5,
+    rowHeight,
+    className
+  }) => {
+    const [skeletons, setSkeletons] = React$2.useState([]);
+    React$2.useEffect(() => {
+      const elements = [];
+      times$2(numRows, (i2) => {
+        elements.push(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(React$2.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Skeleton,
+            {
+              height: rowHeight,
+              width: i2 === numRows - 1 ? "35%" : "100%"
+            }
+          ) }, i2)
+        );
+      });
+      setSkeletons(elements);
+    }, [numRows, rowHeight]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className, children: skeletons });
+  };
+  function AclEditorSkeleton() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$6, { gap: 2, role: "progressbar", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { height: 50, width: 200 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonParagraph, { numRows: 2 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonTable, { numCols: 2, numRows: 4, rowHeight: "30px" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { height: 50, width: 100 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonParagraph, { numRows: 2 })
+    ] });
+  }
+  const ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL = "Add a user or team";
+  const ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT = "Make Public";
+  const REMOVE_PUBLIC_PRINCIPALS_BUTTON_TEXT = "Remove Public Access";
+  const NOTIFY_NEW_ACL_USERS_CHECKBOX_LABEL = "Notify people via email";
+  function AclEditor(props) {
+    const {
+      resourceAccessList,
+      availablePermissionLevels: availablePermissionLevels2,
+      canEdit,
+      canRemoveEntry = canEdit,
+      isLoading = false,
+      emptyText,
+      onAddPrincipalToAcl,
+      updateResourceAccessItem,
+      removeResourceAccessItem,
+      showAddRemovePublicButton,
+      showNotifyCheckbox,
+      notifyCheckboxValue,
+      onNotifyCheckboxChange = noop$9,
+      displayedPermissionLevelOverride
+    } = props;
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(AclEditorSkeleton, {});
+    }
+    const resourceAccessListCurrentlyIncludesPublic = Boolean(
+      resourceAccessList.find(
+        (resourceAccess) => PUBLIC_PRINCIPAL_IDS.includes(resourceAccess.principalId)
+      )
+    );
+    const addOrRemovePublicButtonProps = resourceAccessListCurrentlyIncludesPublic ? {
+      startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(IconSvg, { icon: "close", wrap: false }),
+      children: REMOVE_PUBLIC_PRINCIPALS_BUTTON_TEXT,
+      onClick: () => {
+        PUBLIC_PRINCIPAL_IDS.forEach((publicId) => {
+          removeResourceAccessItem(publicId);
+        });
+      }
+    } : {
+      startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(IconSvg, { icon: "public", wrap: false }),
+      children: ADD_PUBLIC_PRINCIPALS_BUTTON_TEXT,
+      onClick: () => {
+        onAddPrincipalToAcl(PUBLIC_PRINCIPAL_ID);
+        onAddPrincipalToAcl(AUTHENTICATED_PRINCIPAL_ID);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: "30px", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "headline3", mb: "10px", children: "Users and Teams with Permissions" }),
+        resourceAccessList.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1Italic", children: emptyText }) : /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionGroup, { children: resourceAccessList.map((resourceAccess) => {
+          const canChangePermission = typeof canEdit === "function" ? canEdit(resourceAccess) : canEdit;
+          const canDelete = typeof canRemoveEntry === "function" ? canRemoveEntry(resourceAccess) : canRemoveEntry;
+          const permissionLevelOverride = displayedPermissionLevelOverride ? displayedPermissionLevelOverride(resourceAccess) : void 0;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ResourceAccessItem,
+            {
+              resourceAccess,
+              availablePermissionLevels: availablePermissionLevels2,
+              canChangePermission,
+              displayedPermissionLevelOverride: permissionLevelOverride,
+              showDeleteButton: canDelete,
+              onChange: (accessType) => updateResourceAccessItem(
+                resourceAccess.principalId,
+                accessType
+              ),
+              onRemove: () => removeResourceAccessItem(resourceAccess.principalId)
+            },
+            resourceAccess.principalId
+          ) }, resourceAccess.principalId);
+        }) })
+      ] }),
+      canEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "headline3", mb: "10px", children: "Add More" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Typography,
+          {
+            sx: {
+              variant: "body1",
+              lineHeight: "20px",
+              fontStyle: "italic",
+              color: "text.secondary"
+            },
+            mb: "20px",
+            children: "Search for a username or team to add. You can search by username, first or last names, or team name."
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              component: "label",
+              variant: "smallText2",
+              htmlFor: "reviewer-search",
+              children: ADD_PRINCIPAL_TO_ACL_COMBOBOX_LABEL
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            UserSearchBoxV2,
+            {
+              value: null,
+              inputId: "reviewer-search",
+              placeholder: "Username, name (first and last) or team name.",
+              onChange: (id2) => {
+                const parsedId = parseInt(id2 || "");
+                if (parsedId) {
+                  onAddPrincipalToAcl(parsedId);
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { display: "flex", justifyContent: "space-between", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: showAddRemovePublicButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              size: "small",
+              variant: "outlined",
+              ...addOrRemovePublicButtonProps
+            }
+          ) }),
+          showNotifyCheckbox && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Tooltip,
+            {
+              title: "Select to notify newly added people that this item has been shared with them",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FormControlLabel,
+                {
+                  sx: { mr: 0 },
+                  control: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Checkbox$1,
+                    {
+                      value: notifyCheckboxValue,
+                      onChange: () => onNotifyCheckboxChange(!notifyCheckboxValue)
+                    }
+                  ),
+                  label: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", children: NOTIFY_NEW_ACL_USERS_CHECKBOX_LABEL })
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      !canEdit && /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "You do not have sufficient privileges to modify the sharing settings." })
+    ] });
+  }
+  function compareResourceAccessAndUserGroupHeader(a2, b2) {
+    let CompareResult;
+    ((CompareResult2) => {
+      CompareResult2[CompareResult2["A_FIRST"] = -1] = "A_FIRST";
+      CompareResult2[CompareResult2["B_FIRST"] = 1] = "B_FIRST";
+    })(CompareResult || (CompareResult = {}));
+    const hasChangePermissionA = a2.resourceAccess.accessType.includes(
+      ACCESS_TYPE.CHANGE_PERMISSIONS
+    );
+    const hasChangePermissionB = b2.resourceAccess.accessType.includes(
+      ACCESS_TYPE.CHANGE_PERMISSIONS
+    );
+    if (hasChangePermissionA && !hasChangePermissionB)
+      return -1;
+    if (!hasChangePermissionA && hasChangePermissionB)
+      return 1;
+    if (a2.resourceAccess.principalId === AUTHENTICATED_PRINCIPAL_ID && b2.resourceAccess.principalId !== AUTHENTICATED_PRINCIPAL_ID)
+      return -1;
+    if (a2.resourceAccess.principalId !== AUTHENTICATED_PRINCIPAL_ID && b2.resourceAccess.principalId === AUTHENTICATED_PRINCIPAL_ID)
+      return 1;
+    if (a2.resourceAccess.principalId === PUBLIC_PRINCIPAL_ID && b2.resourceAccess.principalId !== PUBLIC_PRINCIPAL_ID)
+      return -1;
+    if (a2.resourceAccess.principalId !== PUBLIC_PRINCIPAL_ID && b2.resourceAccess.principalId === PUBLIC_PRINCIPAL_ID)
+      return 1;
+    return a2.userGroupHeader.userName.localeCompare(b2.userGroupHeader.userName);
+  }
+  function useSortResourceAccessList(resourceAccessList) {
+    const principalIdsOnResourceAccessList = React$2.useMemo(
+      () => resourceAccessList.map((ra) => ra.principalId),
+      [resourceAccessList]
+    );
+    const {
+      data: userGroupHeadersOnResourceAccessList,
+      isLoading,
+      error: error2
+    } = useGetUserGroupHeaders(principalIdsOnResourceAccessList.map(String), {
+      enabled: principalIdsOnResourceAccessList.length > 0
+    });
+    React$2.useEffect(() => {
+      if (error2) {
+        console.error("Error fetching user group headers: ", error2);
+      }
+    }, [error2]);
+    const sortedResourceAccessList = React$2.useMemo(() => {
+      if (!userGroupHeadersOnResourceAccessList) {
+        return null;
+      }
+      const joinedWithUserGroupHeaders = resourceAccessList.map(
+        (ral) => ({
+          resourceAccess: ral,
+          userGroupHeader: userGroupHeadersOnResourceAccessList.find(
+            (ugh) => String(ugh.ownerId) === String(ral.principalId)
+          )
+        })
+      );
+      const allEntriesHaveUserGroupHeader = joinedWithUserGroupHeaders.every(
+        (obj) => Boolean(obj.userGroupHeader)
+      );
+      if (!allEntriesHaveUserGroupHeader) {
+        console.warn(
+          "Some ACL entries do not have a corresponding UserGroupHeader. The ResourceAccess list will not be sorted. Missing entries: ",
+          joinedWithUserGroupHeaders.filter((obj) => !obj.userGroupHeader)
+        );
+        return null;
+      }
+      return joinedWithUserGroupHeaders.toSorted(compareResourceAccessAndUserGroupHeader).map((obj) => obj.resourceAccess);
+    }, [resourceAccessList, userGroupHeadersOnResourceAccessList]);
+    return {
+      sortedResourceAccessList,
+      isLoading
+    };
+  }
+  const PRINCIPAL_ALREADY_ADDED_ERROR_MESSAGE = "User or team already has permissions.";
+  function useUpdateAcl(options2 = {}) {
+    const { onChange = noop$9, onError = noop$9 } = options2;
+    const [isDirty2, setIsDirty] = React$2.useState(false);
+    const [resourceAccessList, setResourceAccessList] = React$2.useState([]);
+    const [hasSorted, setHasSorted] = React$2.useState(false);
+    const { sortedResourceAccessList, isLoading: isLoadingSortedList } = useSortResourceAccessList(resourceAccessList);
+    React$2.useEffect(() => {
+      if (!isDirty2 && !isLoadingSortedList && !hasSorted && sortedResourceAccessList != null) {
+        setResourceAccessList(sortedResourceAccessList);
+        setHasSorted(true);
+      }
+    }, [hasSorted, isDirty2, isLoadingSortedList, sortedResourceAccessList]);
+    React$2.useEffect(() => {
+      onChange(resourceAccessList);
+    }, [resourceAccessList]);
+    const addResourceAccessItem = React$2.useCallback(
+      (principalId, accessTypes) => {
+        setIsDirty(true);
+        if (principalId) {
+          setResourceAccessList((resourceAccessList2) => {
+            const alreadyReviewer = resourceAccessList2.some(
+              (resourceAccess) => resourceAccess.principalId === principalId
+            );
+            if (alreadyReviewer) {
+              onError(PRINCIPAL_ALREADY_ADDED_ERROR_MESSAGE);
+            } else {
+              const newResourceAccess = {
+                principalId,
+                accessType: accessTypes
+              };
+              return [...resourceAccessList2, newResourceAccess];
+            }
+            return resourceAccessList2;
+          });
+        }
+      },
+      [onError]
+    );
+    const updateResourceAccessItem = React$2.useCallback(
+      (principalId, accessType) => {
+        setIsDirty(true);
+        setResourceAccessList(
+          (resourceAccessList2) => resourceAccessList2.map((resourceAccess) => {
+            return resourceAccess.principalId === principalId ? { ...resourceAccess, accessType } : resourceAccess;
+          })
+        );
+      },
+      []
+    );
+    const removeResourceAccessItem = React$2.useCallback((principalId) => {
+      setIsDirty(true);
+      setResourceAccessList(
+        (resourceAccessList2) => resourceAccessList2.filter(
+          (raListItem) => raListItem.principalId !== principalId
+        )
+      );
+    }, []);
+    const resetDirtyState = React$2.useCallback(() => {
+      setIsDirty(false);
+    }, []);
+    return {
+      resourceAccessList,
+      setResourceAccessList,
+      addResourceAccessItem,
+      updateResourceAccessItem,
+      removeResourceAccessItem,
+      resetDirtyState
+    };
+  }
+  function InheritanceMessage(props) {
+    const { isProject, isInherited, benefactorId } = props;
+    let content2 = "";
+    if (isProject) {
+      content2 = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "The sharing settings shown below apply to this project and are inherited by all project contents unless local sharing settings have been set." });
+    }
+    if (isInherited) {
+      content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        "The sharing settings shown below are currently being inherited",
+        " ",
+        benefactorId ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          "from ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(EntityLink, { entity: benefactorId }),
+          " "
+        ] }) : "",
+        "and cannot be modified here."
+      ] });
+    } else {
+      content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        "The local sharing settings shown below are ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "not" }),
+        " being inherited from a parent resource."
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", fontStyle: "italic", color: "text.secondary", children: content2 });
+  }
+  const CREATE_LOCAL_SHARING_SETTINGS = "Create local sharing settings";
+  const DELETE_LOCAL_SHARING_SETTINGS = "Delete local sharing settings";
+  function CreateOrDeleteLocalSharingSettingsButton(props) {
+    const { isInherited, setIsInherited } = props;
+    if (!isInherited) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", mt: 2, mb: 1, children: "The sharing settings will be inherited from the parent folder or project if local sharing settings are deleted." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            color: "error",
+            onClick: () => setIsInherited(true),
+            children: DELETE_LOCAL_SHARING_SETTINGS
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", mt: 2, mb: 1, children: "Sharing settings are initially inherited from the parent folder or project by default. To customize settings for a specific file, folder, or table, you must create and adjust local sharing settings." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "contained",
+          size: "small",
+          color: "success",
+          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(IconSvg, { icon: "add", wrap: false }),
+          onClick: () => setIsInherited(false),
+          children: CREATE_LOCAL_SHARING_SETTINGS
+        }
+      )
+    ] });
+  }
+  function sortResourceAccessList(resourceAccessList) {
+    const clone = cloneDeep$3(resourceAccessList);
+    clone.sort((a2, b2) => b2.principalId - a2.principalId);
+    clone.forEach((ra) => ra.accessType.sort());
+    return clone;
+  }
+  function resourceAccessListIsEqual(a2, b2) {
+    const aSorted = sortResourceAccessList(a2);
+    const bSorted = sortResourceAccessList(b2);
+    return isEqual$6(aSorted, bSorted);
+  }
+  function shouldNotifyUserInNewResourceAccess(principalId, initialResourceAccessList, userGroupHeader, currentUserId) {
+    const isInInitialResourceAccess = initialResourceAccessList.some(
+      (initialResourceAccess) => principalId === initialResourceAccess.principalId
+    );
+    const isIndividual = userGroupHeader.isIndividual;
+    const isCurrentUser = String(principalId) === currentUserId;
+    const isPublic2 = PUBLIC_PRINCIPAL_IDS.includes(principalId);
+    return !isInInitialResourceAccess && // Is not in the initial list
+    isIndividual && // Is an individual, not a team (SWC-1195)
+    !isCurrentUser && // do not notify the current user (SWC-5576)
+    !isPublic2;
+  }
+  function useNotifyNewACLUsers(options2) {
+    const { subject, body, initialResourceAccessList, newResourceAccessList } = options2;
+    const { data: currentUserProfile, isLoading: isLoadingCurrentUserProfile } = useGetCurrentUserProfile();
+    const { data: userGroupHeaders, isLoading: isLoadingUserGroupHeaders } = useGetUserGroupHeaders(
+      newResourceAccessList.map((ra) => String(ra.principalId))
+    );
+    const isLoading = isLoadingCurrentUserProfile || isLoadingUserGroupHeaders;
+    const { mutate: sendMessage2, isPending } = useSendMessage({
+      onError: (error2) => {
+        displayToast(`New users couldn't be notified: ${error2.reason}`);
+      }
+    });
+    const sendNotification = React$2.useCallback(() => {
+      if (isLoading) {
+        console.error(
+          "Attempted to send notification before user profile or user group headers were loaded. This should never happen."
+        );
+        return;
+      }
+      const usersToNotify = newResourceAccessList.filter((newResourceAccess) => {
+        const userGroupHeader = userGroupHeaders.find(
+          (ugh) => ugh.ownerId === String(newResourceAccess.principalId)
+        );
+        return shouldNotifyUserInNewResourceAccess(
+          newResourceAccess.principalId,
+          initialResourceAccessList,
+          userGroupHeader,
+          currentUserProfile.ownerId
+        );
+      }).map((ra) => String(ra.principalId));
+      if (usersToNotify.length > 0) {
+        sendMessage2({
+          subject,
+          body,
+          recipients: usersToNotify
+        });
+      }
+    }, [
+      body,
+      currentUserProfile,
+      initialResourceAccessList,
+      isLoading,
+      newResourceAccessList,
+      sendMessage2,
+      subject,
+      userGroupHeaders
+    ]);
+    return {
+      sendNotification,
+      isPending,
+      isLoading
+    };
+  }
+  function getUserName(userName, inParens) {
+    if (userName != null) {
+      if (inParens) {
+        return ` (${userName})`;
+      }
+      return userName;
+    }
+    return "";
+  }
+  function getDisplayName$1(firstName, lastName, userName) {
+    let displayName = "";
+    let hasDisplayName = false;
+    if (firstName) {
+      displayName += firstName.trim();
+      hasDisplayName = true;
+    }
+    if (lastName) {
+      displayName += " " + lastName.trim();
+      hasDisplayName = true;
+    }
+    displayName += getUserName(userName, hasDisplayName);
+    return displayName;
+  }
+  function getDisplayNameFromProfile(userProfile) {
+    return getDisplayName$1(
+      userProfile.firstName,
+      userProfile.lastName,
+      userProfile.userName
+    );
+  }
+  const availablePermissionLevels$1 = [
+    "CAN_VIEW",
+    "CAN_DOWNLOAD",
+    "CAN_EDIT",
+    "CAN_EDIT_DELETE",
+    "CAN_ADMINISTER"
+  ];
+  function getSubject(entityName) {
+    return `${entityName} (shared on Synapse)`;
+  }
+  function getBody(profile, entityId) {
+    return `${getDisplayNameFromProfile(
+      profile
+    )} has shared an item with you on Synapse:
+${getEndpoint(
+      BackendDestinationEnum.PORTAL_ENDPOINT
+    )}Synapse:${entityId}`;
+  }
+  function getCanEditResourceAccess(canEdit, isInherited, ownProfile) {
+    if (!canEdit || isInherited) {
+      return false;
+    }
+    return (resourceAccess) => {
+      const isSelf = ownProfile.ownerId === String(resourceAccess.principalId);
+      const isPublicGroup = resourceAccess.principalId === PUBLIC_PRINCIPAL_ID;
+      if (isSelf || isPublicGroup) {
+        return false;
+      }
+      return true;
+    };
+  }
+  function getCanDeleteResourceAccess(canEdit, isInherited, ownProfile) {
+    if (!canEdit || isInherited) {
+      return false;
+    }
+    return (resourceAccess) => {
+      const isSelf = ownProfile.ownerId === String(resourceAccess.principalId);
+      if (isSelf) {
+        return false;
+      }
+      return canEdit;
+    };
+  }
+  function getDisplayedPermissionLevelOverride(isOpenData) {
+    return (resourceAccess) => {
+      if (resourceAccess.principalId === PUBLIC_PRINCIPAL_ID) {
+        return isOpenData ? permissionLevelToLabel["CAN_DOWNLOAD"] : permissionLevelToLabel["CAN_VIEW"];
+      }
+      return void 0;
+    };
+  }
+  const EntityAclEditor = React$2.forwardRef(function EntityAclEditor2(props, ref2) {
+    const { entityId, onCanSaveChange, onUpdateSuccess } = props;
+    const { data: ownProfile } = useSuspenseGetCurrentUserProfile();
+    const { data: entityBundle } = useSuspenseGetEntityBundle(
+      entityId,
+      void 0,
+      ALL_ENTITY_BUNDLE_FIELDS,
+      { staleTime: Infinity }
+    );
+    const isProject = EntityType.PROJECT == entityBundle.entityType;
+    const { data: parentAcl } = useSuspenseGetEntityBenefactorACL(
+      entityBundle.entity.parentId,
+      {
+        staleTime: Infinity
+      }
+    );
+    const originalResourceAccess = entityBundle.benefactorAcl.resourceAccess;
+    const parentResourceAccess = React$2.useMemo(
+      () => (parentAcl == null ? void 0 : parentAcl.resourceAccess) ?? [],
+      [parentAcl]
+    );
+    const canEdit = entityBundle.permissions.canChangePermissions;
+    const isOpenData = entityBundle.permissions.isEntityOpenData;
+    const originalIsInherited = !(entityBundle.benefactorAcl.id == entityId);
+    const [updatedIsInherited, setUpdatedIsInherited] = React$2.useState(originalIsInherited);
+    const [notifyNewAdditions, setNotifyNewAdditions] = React$2.useState(false);
+    const [error2, setError] = React$2.useState();
+    const {
+      resourceAccessList: updatedResourceAccessList,
+      setResourceAccessList,
+      addResourceAccessItem,
+      updateResourceAccessItem,
+      removeResourceAccessItem,
+      resetDirtyState
+    } = useUpdateAcl();
+    React$2.useEffect(() => {
+      if (originalResourceAccess) {
+        resetDirtyState();
+        setResourceAccessList(originalResourceAccess);
+      }
+    }, [originalResourceAccess, resetDirtyState, setResourceAccessList]);
+    React$2.useEffect(() => {
+      resetDirtyState();
+      setUpdatedIsInherited(originalIsInherited);
+    }, [originalIsInherited, resetDirtyState]);
+    React$2.useEffect(() => {
+      if (originalIsInherited == updatedIsInherited) {
+        setResourceAccessList(originalResourceAccess);
+      } else if (updatedIsInherited) {
+        setResourceAccessList(parentResourceAccess);
+      } else ;
+      resetDirtyState();
+    }, [
+      originalIsInherited,
+      originalResourceAccess,
+      parentResourceAccess,
+      resetDirtyState,
+      setResourceAccessList,
+      updatedIsInherited
+    ]);
+    const isPublic2 = updatedResourceAccessList.some(
+      (ra) => [
+        AUTHENTICATED_PRINCIPAL_ID,
+        PUBLIC_PRINCIPAL_ID,
+        ANONYMOUS_PRINCIPAL_ID
+      ].includes(ra.principalId)
+    );
+    const {
+      sendNotification,
+      isLoading: isLoadingSendMessageToNewACLUsers,
+      isPending: isPendingSendMessageToNewACLUsers
+    } = useNotifyNewACLUsers({
+      subject: getSubject(entityBundle.entity.name || ""),
+      body: getBody(ownProfile, entityId),
+      initialResourceAccessList: originalResourceAccess,
+      newResourceAccessList: updatedResourceAccessList
+    });
+    const mutationOptions = {
+      onSuccess: () => {
+        if (notifyNewAdditions) {
+          sendNotification();
+        }
+        onUpdateSuccess();
+      },
+      onError: (e2) => {
+        setError(e2);
+      }
+    };
+    const { mutate: createAcl, isPending: isPendingCreateAcl } = useCreateEntityACL(mutationOptions);
+    const { mutate: updateAcl, isPending: isPendingUpdateAcl } = useUpdateEntityACL(mutationOptions);
+    const { mutate: deleteAcl, isPending: isPendingDeleteAcl } = useDeleteEntityACL(mutationOptions);
+    const isPending = isPendingCreateAcl || isPendingUpdateAcl || isPendingDeleteAcl || isPendingSendMessageToNewACLUsers;
+    const hasAclChanged = React$2.useMemo(() => {
+      return originalIsInherited != updatedIsInherited || !resourceAccessListIsEqual(
+        originalResourceAccess,
+        updatedResourceAccessList
+      );
+    }, [
+      originalResourceAccess,
+      originalIsInherited,
+      updatedIsInherited,
+      updatedResourceAccessList
+    ]);
+    const canSave = hasAclChanged || isLoadingSendMessageToNewACLUsers || isPending;
+    React$2.useEffect(() => {
+      onCanSaveChange(canSave);
+    }, [onCanSaveChange, canSave]);
+    React$2.useImperativeHandle(
+      ref2,
+      () => {
+        return {
+          save() {
+            if (canSave) {
+              if (originalIsInherited != updatedIsInherited) {
+                if (updatedIsInherited) {
+                  deleteAcl(entityId);
+                } else {
+                  createAcl({
+                    id: entityId,
+                    resourceAccess: updatedResourceAccessList
+                  });
+                }
+              } else {
+                updateAcl({
+                  // ensure we get all fields from the original ACL, including the etag
+                  ...entityBundle.accessControlList,
+                  resourceAccess: updatedResourceAccessList
+                });
+              }
+            } else {
+              console.error("EntityAclEditor: save() called but canSave is false");
+            }
+          }
+        };
+      },
+      [
+        canSave,
+        createAcl,
+        deleteAcl,
+        entityBundle,
+        entityId,
+        originalIsInherited,
+        updateAcl,
+        updatedIsInherited,
+        updatedResourceAccessList
+      ]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$6, { gap: 2, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        OpenData,
+        {
+          isOpenData,
+          isPublic: isPublic2,
+          currentUserCanUpdateSharingSettings: canEdit
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        InheritanceMessage,
+        {
+          isProject,
+          isInherited: updatedIsInherited,
+          benefactorId: updatedIsInherited ? parentAcl == null ? void 0 : parentAcl.id : entityId
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AclEditor,
+        {
+          canEdit: getCanEditResourceAccess(
+            canEdit,
+            updatedIsInherited,
+            ownProfile
+          ),
+          canRemoveEntry: getCanDeleteResourceAccess(
+            canEdit,
+            updatedIsInherited,
+            ownProfile
+          ),
+          resourceAccessList: updatedResourceAccessList,
+          availablePermissionLevels: availablePermissionLevels$1,
+          emptyText: (
+            /* This should never happen */
+            ""
+          ),
+          displayedPermissionLevelOverride: getDisplayedPermissionLevelOverride(
+            isOpenData
+          ),
+          onAddPrincipalToAcl: (id2) => {
+            if (id2 === PUBLIC_PRINCIPAL_ID) {
+              addResourceAccessItem(
+                id2,
+                getAccessTypeFromPermissionLevel("CAN_VIEW")
+              );
+            } else {
+              addResourceAccessItem(
+                id2,
+                getAccessTypeFromPermissionLevel("CAN_DOWNLOAD")
+              );
+            }
+          },
+          updateResourceAccessItem,
+          removeResourceAccessItem,
+          showNotifyCheckbox: true,
+          notifyCheckboxValue: notifyNewAdditions,
+          onNotifyCheckboxChange: setNotifyNewAdditions,
+          showAddRemovePublicButton: true
+        }
+      ),
+      !isProject && entityBundle.permissions.canEnableInheritance && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CreateOrDeleteLocalSharingSettingsButton,
+        {
+          isInherited: updatedIsInherited,
+          setIsInherited: setUpdatedIsInherited
+        }
+      ),
+      error2 && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { severity: "error", children: error2.message })
+    ] });
+  });
+  const EntityAclEditorWithSuspense = React$2.forwardRef(
+    function EntityAclEditorWithSuspense2(props, ref2) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(SynapseErrorBoundary, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(React$2.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(AclEditorSkeleton, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(EntityAclEditor, { ...props, ref: ref2 }) }) });
+    }
+  );
+  const ENTITY_SHARING_SETTINGS_HELP_MARKDOWN = `Sharing settings determine who can access your content, and what kind of access they have. Choose people/teams and define their level of access below.
+
+_Only Administrators can add, delete, or change access levels for other people._`;
+  const ENTITY_SHARING_SETTINGS_HELP_URL = "https://help.synapse.org/docs/Sharing-Settings,-Permissions,-and-Conditions-for-Use.2024276030.html";
+  function EntityAclEditorModal(props) {
+    var _a3;
+    const { entityId, open, onUpdateSuccess = noop$9, onClose } = props;
+    const [isDirty2, setIsDirty] = React$2.useState(false);
+    const entityAclEditorRef = React$2.useRef(null);
+    const { data: entityBundle } = useGetEntityBundle(entityId);
+    const entityTypeDisplay = (entityBundle == null ? void 0 : entityBundle.entityType) ? entityTypeToFriendlyName(entityBundle == null ? void 0 : entityBundle.entityType) : "";
+    const canEdit = (_a3 = entityBundle == null ? void 0 : entityBundle.permissions) == null ? void 0 : _a3.canChangePermissions;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfirmationDialog,
+      {
+        title: `${entityTypeDisplay} Sharing Settings`.trim(),
+        onCancel: onClose,
+        open,
+        maxWidth: "md",
+        titleHelpPopoverProps: {
+          markdownText: ENTITY_SHARING_SETTINGS_HELP_MARKDOWN,
+          helpUrl: ENTITY_SHARING_SETTINGS_HELP_URL
+        },
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EntityAclEditorWithSuspense,
+          {
+            ref: entityAclEditorRef,
+            entityId,
+            onCanSaveChange: (isDirty22) => setIsDirty(isDirty22),
+            onUpdateSuccess: () => {
+              displayToast(
+                "Permissions were successfully saved to Synapse",
+                "info"
+              );
+              onUpdateSuccess();
+              onClose();
+            }
+          }
+        ),
+        onConfirm: () => {
+          entityAclEditorRef.current.save();
+        },
+        confirmButtonProps: {
+          children: canEdit ? "Save" : "OK",
+          disabled: !isDirty2
+        }
+      }
+    );
+  }
   const DEFAULT_ON_VIEW_SHARING_SETTINGS_CLICKED = (benefactorEntityId) => window.open(
     `https://www.synapse.org/Synapse:${benefactorEntityId}`,
     "_blank"
@@ -116000,7 +117095,11 @@ ${e2.message}`);
       includeEntity: true,
       includePermissions: true
     });
+    const [showSharingSettings, setShowSharingSettings] = React$2.useState(false);
     const hasDownloadPermission = Boolean(entityBundle == null ? void 0 : entityBundle.permissions.canDownload);
+    const useReactACLEditor = useGetFeatureFlag(
+      FeatureFlagEnum.REACT_ENTITY_ACL_EDITOR
+    );
     if (isError) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { severity: "error", children: error2.reason });
     }
@@ -116019,12 +117118,20 @@ ${e2.message}`);
         count: count2,
         actionNode: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", sx: { mb: 1, color: "grey.700" }, children: "Contact an administrator to request download permission" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            EntityAclEditorModal,
+            {
+              entityId,
+              open: showSharingSettings,
+              onClose: () => setShowSharingSettings(false)
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Button,
             {
               variant: "outlined",
               onClick: () => {
-                onViewSharingSettingsClicked(entityId);
+                useReactACLEditor ? setShowSharingSettings(true) : onViewSharingSettingsClicked(entityId);
               },
               disabled: hasDownloadPermission,
               children: hasDownloadPermission ? "Complete" : "View Sharing Settings"
@@ -117296,29 +118403,6 @@ query = syn.tableQuery("${clientSql}")${"\n"}query.asDataFrame()`
       }
     );
   }
-  const SkeletonParagraph = ({
-    numRows = 5,
-    rowHeight,
-    className
-  }) => {
-    const [skeletons, setSkeletons] = React$2.useState([]);
-    React$2.useEffect(() => {
-      const elements = [];
-      times$2(numRows, (i2) => {
-        elements.push(
-          /* @__PURE__ */ jsxRuntimeExports.jsx(React$2.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Skeleton,
-            {
-              height: rowHeight,
-              width: i2 === numRows - 1 ? "35%" : "100%"
-            }
-          ) }, i2)
-        );
-      });
-      setSkeletons(elements);
-    }, [numRows, rowHeight]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className, children: skeletons });
-  };
   function useExportToCavatica(queryBundleRequest, selectColumns, fileIdColumnName = "id", fileNameColumnName = "name", fileVersionColumnName = "currentVersion") {
     const { accessToken } = useSynapseContext();
     const separator = ",";
@@ -123241,7 +124325,7 @@ query = syn.tableQuery("${clientSql}")${"\n"}query.asDataFrame()`
     } = props;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$6, { direction: "row", alignItems: "center", gap: "5px", children: [
       title2,
-      titleHelpPopoverProps && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpPopover, { ...titleHelpPopoverProps }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "span", fontSize: "14px", children: titleHelpPopoverProps && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpPopover, { ...titleHelpPopoverProps }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { flexGrow: 1 } }),
       hasCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(CloseButton, { onClick: () => onCancel() })
     ] }) });
@@ -162047,38 +163131,7 @@ dl_list_file_entities = syn.get_download_list()`;
       }
     );
   };
-  const calculateOpacity = (rect) => {
-    const viewportHeight = window.innerHeight;
-    const elementCenterY = rect.top + rect.height / 2;
-    const middleRangeStart = viewportHeight * 0.4;
-    const middleRangeEnd = viewportHeight * 0.6;
-    if (elementCenterY <= middleRangeEnd) {
-      return 1;
-    } else {
-      const distanceToMiddle = Math.min(
-        Math.abs(elementCenterY - middleRangeStart),
-        Math.abs(elementCenterY - middleRangeEnd)
-      );
-      const maxDistance = viewportHeight / 4;
-      return Math.max(0, 1 - distanceToMiddle / maxDistance);
-    }
-  };
-  function useScrollFadeTransition() {
-    const ref2 = React$2.useRef(null);
-    const [opacity, setOpacity] = React$2.useState(1);
-    React$2.useEffect(() => {
-      const handleScroll = () => {
-        const rect = ref2.current.getBoundingClientRect();
-        setOpacity(calculateOpacity(rect));
-      };
-      if (ref2) {
-        window.addEventListener("scroll", handleScroll);
-        handleScroll();
-      }
-      return () => window.removeEventListener("scroll", handleScroll);
-    }, [ref2]);
-    return { ref: ref2, opacity };
-  }
+  const transitionTimeoutMs = 320;
   const mobileViewSxProps = {
     display: "flex",
     justifyContent: "center",
@@ -162099,7 +163152,7 @@ dl_list_file_entities = syn.get_download_list()`;
   }) => {
     const theme3 = useTheme$1();
     const isMobileView = useMediaQuery(theme3.breakpoints.down("sm"));
-    const { ref: ref2, opacity } = useScrollFadeTransition();
+    const [ref2, inView] = useInView({ threshold: 0.3, triggerOnce: true });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Box,
       {
@@ -162212,16 +163265,15 @@ dl_list_file_entities = syn.get_download_list()`;
               sx: {
                 display: { xs: "none", md: "block" },
                 justifySelf: "end",
-                alignSelf: "end",
-                opacity
+                alignSelf: "end"
               },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Fade, { in: inView, timeout: transitionTimeoutMs, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Slide, { direction: "left", timeout: transitionTimeoutMs, in: inView, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ImageFromSynapseTable,
                 {
                   tableId,
                   fileHandleId: imageFileHandleId
                 }
-              )
+              ) }) }) }) })
             }
           )
         ]
@@ -162538,11 +163590,7 @@ dl_list_file_entities = syn.get_download_list()`;
               SynapsePlanContent,
               {
                 category: "Explore Data",
-                items: [
-                  "<100 GB of content",
-                  "Sage Managed Individual Storage",
-                  "4TB/year of data egress"
-                ]
+                items: ["<100 GB of content", "Sage Managed Individual Storage"]
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -162574,11 +163622,7 @@ dl_list_file_entities = syn.get_download_list()`;
               SynapsePlanContent,
               {
                 category: "Explore More Data",
-                items: [
-                  "<500 GB of content",
-                  "Secure cloud storage",
-                  "<20 TB/year of data egress"
-                ]
+                items: ["<500 GB of content", "Secure cloud storage"]
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -163439,90 +164483,99 @@ dl_list_file_entities = syn.get_download_list()`;
           })
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
         Box,
         {
           sx: {
-            display: { xs: "relative", lg: "grid" },
-            gridTemplateColumns: "50% 50%",
             backgroundColor: "#F5F9F9",
-            mt: { xs: "50px", md: "100px" },
-            height: { lg: "608px" }
-            //force container to the same height as the image
+            mt: { xs: "50px", md: "100px" }
           },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Box,
-              {
-                sx: {
-                  p: { xs: "25px", lg: "70px 0px 25px 60px" },
-                  svg: {
-                    maxWidth: "100%"
-                  },
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: {
-                    xs: "center",
-                    md: "flex-start"
-                  }
-                },
-                ref: ref2,
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(SageFullLogo, { width: 350 }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    Typography,
-                    {
-                      variant: "headline2",
-                      sx: {
-                        ...defaultHomepageText,
-                        fontSize: {
-                          xs: "24px",
-                          md: "40px"
-                        },
-                        lineHeight: {
-                          xs: "140%",
-                          md: "60px"
-                        },
-                        maxWidth: "600px",
-                        color: "secondary.600",
-                        mt: "20px",
-                        fontWeight: 400,
-                        mb: "35px",
-                        textAlign: {
-                          xs: "center",
-                          md: "left"
-                        }
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Box,
+            {
+              sx: {
+                display: { xs: "relative", lg: "grid" },
+                maxWidth: "1500px",
+                gridTemplateColumns: "50% 50%",
+                margin: "auto",
+                height: { lg: "608px" }
+                //force container to the same height as the image
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  Box,
+                  {
+                    sx: {
+                      p: { xs: "25px", lg: "70px 0px 25px 60px" },
+                      svg: {
+                        maxWidth: "100%"
                       },
-                      children: [
-                        "Created by ",
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Sage Bionetworks" }),
-                        ", Synapse empowers biomedical researchers with tools for open science and collaboration, forging a path to optimal human health."
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
-                    {
-                      size: "large",
-                      variant: "contained",
-                      color: "secondary",
-                      href: "https://www.sagebionetworks.org",
-                      target: "_blank",
-                      sx: {
-                        p: "5px 25px",
-                        width: {
-                          xs: "100%",
-                          md: "auto"
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: {
+                        xs: "center",
+                        md: "flex-start"
+                      }
+                    },
+                    ref: ref2,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SageFullLogo, { width: 350 }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                        Typography,
+                        {
+                          variant: "headline2",
+                          sx: {
+                            ...defaultHomepageText,
+                            fontSize: {
+                              xs: "24px",
+                              md: "40px"
+                            },
+                            lineHeight: {
+                              xs: "140%",
+                              md: "60px"
+                            },
+                            maxWidth: "600px",
+                            color: "secondary.600",
+                            mt: "20px",
+                            fontWeight: 400,
+                            mb: "35px",
+                            textAlign: {
+                              xs: "center",
+                              md: "left"
+                            }
+                          },
+                          children: [
+                            "Created by ",
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Sage Bionetworks" }),
+                            ", Synapse empowers biomedical researchers with tools for open science and collaboration, forging a path to optimal human health."
+                          ]
                         }
-                      },
-                      children: "About Sage Bionetworks"
-                    }
-                  )
-                ]
-              }
-            ),
-            isDesktopView && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { height: "100%", justifySelf: "end" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$w, {}) })
-          ]
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Button,
+                        {
+                          size: "large",
+                          variant: "contained",
+                          color: "secondary",
+                          href: "https://www.sagebionetworks.org",
+                          target: "_blank",
+                          sx: {
+                            p: "5px 25px",
+                            width: {
+                              xs: "100%",
+                              md: "auto"
+                            }
+                          },
+                          children: "About Sage Bionetworks"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isDesktopView && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { height: "100%", justifySelf: "end" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$w, {}) })
+              ]
+            }
+          )
         }
       ),
       inView && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
@@ -163569,7 +164622,7 @@ dl_list_file_entities = syn.get_download_list()`;
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
             Box,
             {
               sx: {
@@ -163585,62 +164638,71 @@ dl_list_file_entities = syn.get_download_list()`;
                 },
                 pb: "5px"
               },
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Typography,
-                  {
-                    variant: "headline1",
-                    sx: {
-                      ...h2Sx,
-                      textAlign: "center",
-                      mt: "100px",
-                      mb: "10px",
-                      color: "white"
-                    },
-                    children: "Synapse by the numbers"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  Typography,
-                  {
-                    variant: "body1",
-                    sx: {
-                      ...homepageBodyText,
-                      textAlign: "center",
-                      mb: "70px",
-                      color: "white"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(BlinkingLiveIcon, { sx: { pt: "7px" } }),
-                      " Live"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SynapseByTheNumbers, { metricsTable: generalStatsMetricsTable }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Typography,
-                  {
-                    variant: "headline2",
-                    sx: {
-                      ...defaultHomepageText,
-                      textAlign: "center",
-                      fontSize: "36px",
-                      lineHeight: "40px",
-                      mt: "60px",
-                      mb: "25px",
-                      color: "white",
-                      fontWeight: 400
-                    },
-                    children: "Projects trending this month"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  SynapseTrendingProjects,
-                  {
-                    past30DaysDownloadMetricsTable
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Box,
+                {
+                  sx: {
+                    margin: "auto",
+                    maxWidth: "1500px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Typography,
+                      {
+                        variant: "headline1",
+                        sx: {
+                          ...h2Sx,
+                          textAlign: "center",
+                          mt: "100px",
+                          mb: "10px",
+                          color: "white"
+                        },
+                        children: "Synapse by the numbers"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      Typography,
+                      {
+                        variant: "body1",
+                        sx: {
+                          ...homepageBodyText,
+                          textAlign: "center",
+                          mb: "70px",
+                          color: "white"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(BlinkingLiveIcon, { sx: { pt: "7px" } }),
+                          " Live"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SynapseByTheNumbers, { metricsTable: generalStatsMetricsTable }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Typography,
+                      {
+                        variant: "headline2",
+                        sx: {
+                          ...defaultHomepageText,
+                          textAlign: "center",
+                          fontSize: "36px",
+                          lineHeight: "40px",
+                          mt: "60px",
+                          mb: "25px",
+                          color: "white",
+                          fontWeight: 400
+                        },
+                        children: "Projects trending this month"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      SynapseTrendingProjects,
+                      {
+                        past30DaysDownloadMetricsTable
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -176751,294 +177813,6 @@ dl_list_file_entities = syn.get_download_list()`;
       }
     );
   }
-  function compareResourceAccessAndUserGroupHeader(a2, b2) {
-    let CompareResult;
-    ((CompareResult2) => {
-      CompareResult2[CompareResult2["A_FIRST"] = -1] = "A_FIRST";
-      CompareResult2[CompareResult2["B_FIRST"] = 1] = "B_FIRST";
-    })(CompareResult || (CompareResult = {}));
-    const hasChangePermissionA = a2.resourceAccess.accessType.includes(
-      ACCESS_TYPE.CHANGE_PERMISSIONS
-    );
-    const hasChangePermissionB = b2.resourceAccess.accessType.includes(
-      ACCESS_TYPE.CHANGE_PERMISSIONS
-    );
-    if (hasChangePermissionA && !hasChangePermissionB)
-      return -1;
-    if (!hasChangePermissionA && hasChangePermissionB)
-      return 1;
-    if (a2.resourceAccess.principalId === AUTHENTICATED_PRINCIPAL_ID && b2.resourceAccess.principalId !== AUTHENTICATED_PRINCIPAL_ID)
-      return -1;
-    if (a2.resourceAccess.principalId !== AUTHENTICATED_PRINCIPAL_ID && b2.resourceAccess.principalId === AUTHENTICATED_PRINCIPAL_ID)
-      return 1;
-    if (a2.resourceAccess.principalId === PUBLIC_PRINCIPAL_ID && b2.resourceAccess.principalId !== PUBLIC_PRINCIPAL_ID)
-      return -1;
-    if (a2.resourceAccess.principalId !== PUBLIC_PRINCIPAL_ID && b2.resourceAccess.principalId === PUBLIC_PRINCIPAL_ID)
-      return 1;
-    return a2.userGroupHeader.userName.localeCompare(b2.userGroupHeader.userName);
-  }
-  function useSortResourceAccessList(resourceAccessList) {
-    const principalIdsOnResourceAccessList = React$2.useMemo(
-      () => resourceAccessList.map((ra) => ra.principalId),
-      [resourceAccessList]
-    );
-    const {
-      data: userGroupHeadersOnResourceAccessList,
-      isLoading,
-      error: error2
-    } = useGetUserGroupHeaders(principalIdsOnResourceAccessList.map(String));
-    React$2.useEffect(() => {
-      if (error2) {
-        console.error("Error fetching user group headers: ", error2);
-      }
-    }, [error2]);
-    const sortedResourceAccessList = React$2.useMemo(() => {
-      if (!userGroupHeadersOnResourceAccessList) {
-        return resourceAccessList;
-      }
-      const joinedWithUserGroupHeaders = resourceAccessList.map(
-        (ral) => ({
-          resourceAccess: ral,
-          userGroupHeader: userGroupHeadersOnResourceAccessList.find(
-            (ugh) => String(ugh.ownerId) === String(ral.principalId)
-          )
-        })
-      );
-      const allEntriesHaveUserGroupHeader = joinedWithUserGroupHeaders.every(
-        (obj) => Boolean(obj.userGroupHeader)
-      );
-      if (!allEntriesHaveUserGroupHeader) {
-        console.warn(
-          "Some ACL entries do not have a corresponding UserGroupHeader. The ResourceAccess list will not be sorted. Missing entries: ",
-          joinedWithUserGroupHeaders.filter((obj) => !obj.userGroupHeader)
-        );
-        return resourceAccessList;
-      }
-      return joinedWithUserGroupHeaders.toSorted(compareResourceAccessAndUserGroupHeader).map((obj) => obj.resourceAccess);
-    }, [resourceAccessList, userGroupHeadersOnResourceAccessList]);
-    return {
-      sortedResourceAccessList,
-      isLoading
-    };
-  }
-  const PRINCIPAL_ALREADY_ADDED_ERROR_MESSAGE = "User or team already has permissions.";
-  function useUpdateAcl(options2) {
-    const { onChange = noop$9, onError = noop$9 } = options2;
-    const [isDirty2, setIsDirty] = React$2.useState(false);
-    const [resourceAccessList, setResourceAccessList] = React$2.useState([]);
-    const [hasSorted, setHasSorted] = React$2.useState(false);
-    const { sortedResourceAccessList, isLoading: isLoadingSortedList } = useSortResourceAccessList(resourceAccessList);
-    React$2.useEffect(() => {
-      if (!isDirty2 && !isLoadingSortedList && !hasSorted) {
-        setResourceAccessList(sortedResourceAccessList);
-        setHasSorted(true);
-      }
-    }, [hasSorted, isDirty2, isLoadingSortedList, sortedResourceAccessList]);
-    React$2.useEffect(() => {
-      onChange(resourceAccessList);
-    }, [resourceAccessList]);
-    const addResourceAccessItem = (newReviewerId, accessTypes) => {
-      setIsDirty(true);
-      if (newReviewerId) {
-        const alreadyReviewer = resourceAccessList.some(
-          (resourceAccess) => resourceAccess.principalId === Number(newReviewerId)
-        );
-        if (alreadyReviewer) {
-          onError(PRINCIPAL_ALREADY_ADDED_ERROR_MESSAGE);
-        } else {
-          const newResourceAccess = {
-            principalId: Number(newReviewerId),
-            accessType: accessTypes
-          };
-          const updatedResourceAccessList = [
-            ...resourceAccessList,
-            newResourceAccess
-          ];
-          setResourceAccessList(updatedResourceAccessList);
-        }
-      }
-    };
-    const updateResourceAccessItem = (principalId, accessType) => {
-      setIsDirty(true);
-      const updatedResourceAccessList = resourceAccessList.map((resourceAccess) => {
-        return resourceAccess.principalId === principalId ? { ...resourceAccess, accessType } : resourceAccess;
-      });
-      setResourceAccessList(updatedResourceAccessList);
-    };
-    const removeResourceAccessItem = (principalId) => {
-      setIsDirty(true);
-      const updatedResourceAccessList = resourceAccessList.filter(
-        (raListItem) => raListItem.principalId !== principalId
-      );
-      setResourceAccessList(updatedResourceAccessList);
-    };
-    return {
-      resourceAccessList,
-      setResourceAccessList,
-      addResourceAccessItem,
-      updateResourceAccessItem,
-      removeResourceAccessItem
-    };
-  }
-  const PermissionLevelMenu = (props) => {
-    const { currentAccessType, availablePermissionLevels: availablePermissionLevels2, onChange } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TextField$1,
-      {
-        value: getPermissionLevelFromAccessType(currentAccessType) || null,
-        onChange: (e2) => {
-          const accessType = getAccessTypeFromPermissionLevel(
-            e2.target.value
-          );
-          if (!accessType) {
-            console.error(
-              `ACCESS_TYPE[] not found for PermissionLevel: ${e2.target.value}`
-            );
-          }
-          onChange(accessType || null);
-        },
-        fullWidth: true,
-        select: true,
-        SelectProps: {
-          renderValue: (selected) => permissionLevelToLabel[selected]
-        },
-        size: "small",
-        children: Object.values(availablePermissionLevels2).map((permissionLevel) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: permissionLevel, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", noWrap: true, children: permissionLevelToLabel[permissionLevel] }) }, permissionLevel);
-        })
-      }
-    );
-  };
-  function ReadOnlyPermissionLevel(props) {
-    const { accessType } = props;
-    return permissionLevelToLabel[getPermissionLevelFromAccessType(accessType)];
-  }
-  const REMOVE_BUTTON_LABEL = "Remove from AR Permissions";
-  const ResourceAccessItem = (props) => {
-    const {
-      resourceAccess,
-      availablePermissionLevels: availablePermissionLevels2,
-      isInEditMode,
-      onChange,
-      onRemove: onRemove2
-    } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Stack$6,
-      {
-        direction: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: "10px",
-        py: "6px",
-        role: "row",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { fontSize: "16px", lineHeight: "20px", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UserOrTeamBadge, { principalId: resourceAccess.principalId }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$6, { direction: "row", gap: "10px", alignItems: "center", width: "225px", children: [
-            !isInEditMode && /* @__PURE__ */ jsxRuntimeExports.jsx(ReadOnlyPermissionLevel, { accessType: resourceAccess.accessType }),
-            isInEditMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                PermissionLevelMenu,
-                {
-                  currentAccessType: resourceAccess.accessType,
-                  availablePermissionLevels: availablePermissionLevels2,
-                  onChange
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                IconSvgButton,
-                {
-                  "aria-label": REMOVE_BUTTON_LABEL,
-                  onClick: () => onRemove2(),
-                  icon: "delete",
-                  sx: {
-                    "&:hover": {
-                      color: "error.main"
-                    }
-                  }
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    ) });
-  };
-  function AclEditor(props) {
-    const {
-      isInEditMode,
-      isLoading,
-      resourceAccessList,
-      availablePermissionLevels: availablePermissionLevels2,
-      emptyText,
-      onAddPrincipalToAcl,
-      updateResourceAccessItem,
-      removeResourceAccessItem
-    } = props;
-    if (isLoading) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { display: "flex", justifyContent: "center", height: "150px", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SynapseSpinner, { size: 50 }) });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: "30px", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "headline3", mb: "10px", children: "Users and Teams with Permissions" }),
-        resourceAccessList.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1Italic", children: emptyText }) : /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionGroup, { children: resourceAccessList.map((resourceAccess) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ResourceAccessItem,
-            {
-              resourceAccess,
-              availablePermissionLevels: availablePermissionLevels2,
-              isInEditMode,
-              onChange: (accessType) => updateResourceAccessItem(
-                resourceAccess.principalId,
-                accessType
-              ),
-              onRemove: () => removeResourceAccessItem(resourceAccess.principalId)
-            },
-            resourceAccess.principalId
-          ) }, resourceAccess.principalId);
-        }) })
-      ] }),
-      isInEditMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "headline3", mb: "10px", children: "Add More" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Typography,
-          {
-            sx: {
-              variant: "body1",
-              lineHeight: "20px",
-              fontStyle: "italic",
-              color: "grey.900"
-            },
-            mb: "20px",
-            children: "Search for a username or team to add. You can search by username, first or last names, or team name"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Typography,
-            {
-              component: "label",
-              variant: "smallText2",
-              htmlFor: "reviewer-search",
-              children: "Add a user or team"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            UserSearchBoxV2,
-            {
-              value: null,
-              inputId: "reviewer-search",
-              placeholder: "Username, name (first and last) or team name.",
-              onChange: (id2) => {
-                if (id2) {
-                  onAddPrincipalToAcl(id2);
-                }
-              }
-            }
-          )
-        ] })
-      ] })
-    ] });
-  }
   const textSx = {
     variant: "body1",
     lineHeight: "20px",
@@ -177071,13 +177845,15 @@ dl_list_file_entities = syn.get_download_list()`;
         setResourceAccessList,
         addResourceAccessItem,
         updateResourceAccessItem,
-        removeResourceAccessItem
+        removeResourceAccessItem,
+        resetDirtyState
       } = useUpdateAcl({
         onChange: () => setError(null),
         onError: setError
       });
       React$2.useEffect(() => {
         if (originalAcl) {
+          resetDirtyState();
           setResourceAccessList(originalAcl.resourceAccess);
         }
       }, [originalAcl, setResourceAccessList]);
@@ -177146,11 +177922,13 @@ dl_list_file_entities = syn.get_download_list()`;
             resourceAccessList,
             availablePermissionLevels,
             isLoading: isLoadingOriginalAcl,
-            isInEditMode: true,
+            canEdit: true,
             emptyText: EMPTY_RESOURCE_ACCESS_LIST_TEXT,
             onAddPrincipalToAcl: (id2) => addResourceAccessItem(id2, [ACCESS_TYPE.REVIEW_SUBMISSIONS]),
             updateResourceAccessItem,
-            removeResourceAccessItem
+            removeResourceAccessItem,
+            showAddRemovePublicButton: false,
+            showNotifyCheckbox: false
           }
         ),
         error2 && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { severity: "error", children: error2 })
@@ -178757,8 +179535,7 @@ dl_list_file_entities = syn.get_download_list()`;
     portalVersion,
     srcVersion,
     repoVersion,
-    gotoPlace,
-    reportViolationCallback
+    gotoPlace
   }) => {
     const { accessToken } = useSynapseContext();
     const registrationUrl = useOneSageURL("/register1");
@@ -178901,10 +179678,12 @@ dl_list_file_entities = syn.get_download_list()`;
                               },
                               {
                                 text: "Report Violations",
-                                props: { onClick: reportViolationCallback }
+                                props: {
+                                  href: "https://sagebionetworks.jira.com/servicedesk/customer/portal/20"
+                                }
                               },
                               {
-                                text: "Privacy & Terms of Service",
+                                text: "Trust Center",
                                 props: { href: "https://sagebionetworks.org/trust-center" }
                               }
                             ]
@@ -179304,7 +180083,7 @@ dl_list_file_entities = syn.get_download_list()`;
       )
     ] });
   };
-  const version = "3.3.6";
+  const version = "3.3.7";
   const SynapseEnums = {
     BackendDestinationEnum
   };
@@ -179388,7 +180167,8 @@ dl_list_file_entities = syn.get_download_list()`;
     CreateOrUpdateAccessRequirementWizard,
     GoogleAnalytics,
     CookiesNotification,
-    getCurrentCookiePreferences
+    getCurrentCookiePreferences,
+    EntityAclEditorModal
   };
   const SynapseReactClientVersion = version;
   exports2.HttpClient = HttpClient;