synapse-react-client 3.3.6 → 3.3.8

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.8 */
 
   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";
@@ -40848,6 +40861,26 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     RestrictionLevel2["CONTROLLED_BY_ACT"] = "CONTROLLED_BY_ACT";
     return RestrictionLevel2;
   })(RestrictionLevel || {});
+  var SearchFieldName = /* @__PURE__ */ ((SearchFieldName2) => {
+    SearchFieldName2["ID"] = "Id";
+    SearchFieldName2["NAME"] = "Name";
+    SearchFieldName2["DESCRIPTION"] = "Description";
+    SearchFieldName2["ENTITY_TYPE"] = "EntityType";
+    SearchFieldName2["MODIFIED_BY"] = "ModifiedBy";
+    SearchFieldName2["MODIFIED_ON"] = "ModifiedOn";
+    SearchFieldName2["CREATED_BY"] = "CreatedBy";
+    SearchFieldName2["CREATED_ON"] = "CreatedOn";
+    SearchFieldName2["CONSORTIUM"] = "Consortium";
+    SearchFieldName2["DIAGNOSIS"] = "Diagnosis";
+    SearchFieldName2["ORGAN"] = "Organ";
+    SearchFieldName2["TISSUE"] = "Tissue";
+    return SearchFieldName2;
+  })(SearchFieldName || {});
+  var SearchFacetSort = /* @__PURE__ */ ((SearchFacetSort2) => {
+    SearchFacetSort2["ALPHA"] = "ALPHA";
+    SearchFacetSort2["COUNT"] = "COUNT";
+    return SearchFacetSort2;
+  })(SearchFacetSort || {});
   var SubscriptionObjectType = /* @__PURE__ */ ((SubscriptionObjectType2) => {
     SubscriptionObjectType2["FORUM"] = "FORUM";
     SubscriptionObjectType2["THREAD"] = "THREAD";
@@ -46405,7 +46438,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 +49547,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 +49806,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 +49844,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 +49856,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 +49932,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 +51099,14 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     useCreateAccessRequirement,
     useCreateAccessRequirementACL,
     useCreateEntity,
+    useCreateEntityACL,
     useCreateLockAccessRequirement,
     useCreateOAuthClient,
     useCreateTeam,
     useCreateWikiPage,
     useDeleteAccessRequirementACL,
     useDeleteEntity,
+    useDeleteEntityACL,
     useDeleteOAuthClient,
     useDeleteTeamMembership,
     useDisableTwoFactorAuth,
@@ -51018,6 +51137,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     useGetEntityActionsRequired,
     useGetEntityAlias,
     useGetEntityBundle,
+    useGetEntityBundleQueryOptions,
     useGetEntityChallenge,
     useGetEntityChildren,
     useGetEntityChildrenInfinite,
@@ -51091,6 +51211,9 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     useSortAccessRequirementIdsByCompletion,
     useStartTwoFactorEnrollment,
     useSubmitDataAccessRequest,
+    useSuspenseGetCurrentUserProfile,
+    useSuspenseGetEntityBenefactorACL,
+    useSuspenseGetEntityBundle,
     useUpdateAccessRequirement,
     useUpdateAccessRequirementACL,
     useUpdateDataAccessRequest,
@@ -53521,9 +53644,6 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     return response.responseBody;
   };
   const getQueryTableAsyncJobResults = async (queryBundleRequest, accessToken, setCurrentAsyncStatus) => {
-    console.log(
-      `Querying ${getEndpoint(BackendDestinationEnum.PORTAL_ENDPOINT)}Synapse:${queryBundleRequest.entityId}`
-    );
     const asyncJobId = await doPost(
       TABLE_QUERY_ASYNC_START(queryBundleRequest.entityId),
       queryBundleRequest,
@@ -53864,6 +53984,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 +54000,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 +56155,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     createAccessRequirementAcl,
     createColumnModels,
     createEntity,
+    createEntityACL,
     createEvaluation,
     createEvaluationRound,
     createFormData,
@@ -56043,6 +56179,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     deleteDownloadListFiles,
     deleteEmail,
     deleteEntity,
+    deleteEntityACL,
     deleteEvaluation,
     deleteEvaluationRound,
     deleteFormData,
@@ -56269,13 +56406,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 +93913,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 +94051,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 +94248,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 +94506,8 @@ ${e2.message}`);
       nextQueryRequest,
       currentQueryRequest,
       addValueToSelectedFacet: addValueToSelectedFacet2,
-      setRangeFacetValue: setRangeFacetValue2
+      setRangeFacetValue: setRangeFacetValue2,
+      resetDebounceTimer
     } = immutableTableQueryResult;
     const lastQueryRequest = React$2.useMemo(() => {
       return getCurrentQueryRequest();
@@ -94437,6 +94609,7 @@ ${e2.message}`);
       addValueToSelectedFacet: addValueToSelectedFacet2,
       combineRangeFacetConfig,
       setRangeFacetValue: setRangeFacetValue2,
+      resetDebounceTimer,
       ...paginationControls
     });
     const { children: children2 } = props;
@@ -94524,650 +94697,6 @@ ${e2.message}`);
       )
     ] });
   };
-  var resizeObservers = [];
-  var hasActiveObservations = function() {
-    return resizeObservers.some(function(ro) {
-      return ro.activeTargets.length > 0;
-    });
-  };
-  var hasSkippedObservations = function() {
-    return resizeObservers.some(function(ro) {
-      return ro.skippedTargets.length > 0;
-    });
-  };
-  var msg = "ResizeObserver loop completed with undelivered notifications.";
-  var deliverResizeLoopError = function() {
-    var event;
-    if (typeof ErrorEvent === "function") {
-      event = new ErrorEvent("error", {
-        message: msg
-      });
-    } else {
-      event = document.createEvent("Event");
-      event.initEvent("error", false, false);
-      event.message = msg;
-    }
-    window.dispatchEvent(event);
-  };
-  var ResizeObserverBoxOptions;
-  (function(ResizeObserverBoxOptions2) {
-    ResizeObserverBoxOptions2["BORDER_BOX"] = "border-box";
-    ResizeObserverBoxOptions2["CONTENT_BOX"] = "content-box";
-    ResizeObserverBoxOptions2["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
-  })(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
-  var freeze = function(obj) {
-    return Object.freeze(obj);
-  };
-  var ResizeObserverSize = /* @__PURE__ */ function() {
-    function ResizeObserverSize2(inlineSize, blockSize) {
-      this.inlineSize = inlineSize;
-      this.blockSize = blockSize;
-      freeze(this);
-    }
-    return ResizeObserverSize2;
-  }();
-  var DOMRectReadOnly$1 = function() {
-    function DOMRectReadOnly2(x2, y2, width2, height2) {
-      this.x = x2;
-      this.y = y2;
-      this.width = width2;
-      this.height = height2;
-      this.top = this.y;
-      this.left = this.x;
-      this.bottom = this.top + this.height;
-      this.right = this.left + this.width;
-      return freeze(this);
-    }
-    DOMRectReadOnly2.prototype.toJSON = function() {
-      var _a3 = this, x2 = _a3.x, y2 = _a3.y, top2 = _a3.top, right2 = _a3.right, bottom2 = _a3.bottom, left2 = _a3.left, width2 = _a3.width, height2 = _a3.height;
-      return { x: x2, y: y2, top: top2, right: right2, bottom: bottom2, left: left2, width: width2, height: height2 };
-    };
-    DOMRectReadOnly2.fromRect = function(rectangle) {
-      return new DOMRectReadOnly2(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
-    };
-    return DOMRectReadOnly2;
-  }();
-  var isSVG = function(target) {
-    return target instanceof SVGElement && "getBBox" in target;
-  };
-  var isHidden = function(target) {
-    if (isSVG(target)) {
-      var _a3 = target.getBBox(), width2 = _a3.width, height2 = _a3.height;
-      return !width2 && !height2;
-    }
-    var _b2 = target, offsetWidth = _b2.offsetWidth, offsetHeight = _b2.offsetHeight;
-    return !(offsetWidth || offsetHeight || target.getClientRects().length);
-  };
-  var isElement$1 = function(obj) {
-    var _a3;
-    if (obj instanceof Element) {
-      return true;
-    }
-    var scope2 = (_a3 = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a3 === void 0 ? void 0 : _a3.defaultView;
-    return !!(scope2 && obj instanceof scope2.Element);
-  };
-  var isReplacedElement = function(target) {
-    switch (target.tagName) {
-      case "INPUT":
-        if (target.type !== "image") {
-          break;
-        }
-      case "VIDEO":
-      case "AUDIO":
-      case "EMBED":
-      case "OBJECT":
-      case "CANVAS":
-      case "IFRAME":
-      case "IMG":
-        return true;
-    }
-    return false;
-  };
-  var global$1 = typeof window !== "undefined" ? window : {};
-  var cache = /* @__PURE__ */ new WeakMap();
-  var scrollRegexp = /auto|scroll/;
-  var verticalRegexp = /^tb|vertical/;
-  var IE = /msie|trident/i.test(global$1.navigator && global$1.navigator.userAgent);
-  var parseDimension = function(pixel) {
-    return parseFloat(pixel || "0");
-  };
-  var size$1 = function(inlineSize, blockSize, switchSizes) {
-    if (inlineSize === void 0) {
-      inlineSize = 0;
-    }
-    if (blockSize === void 0) {
-      blockSize = 0;
-    }
-    if (switchSizes === void 0) {
-      switchSizes = false;
-    }
-    return new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
-  };
-  var zeroBoxes = freeze({
-    devicePixelContentBoxSize: size$1(),
-    borderBoxSize: size$1(),
-    contentBoxSize: size$1(),
-    contentRect: new DOMRectReadOnly$1(0, 0, 0, 0)
-  });
-  var calculateBoxSizes = function(target, forceRecalculation) {
-    if (forceRecalculation === void 0) {
-      forceRecalculation = false;
-    }
-    if (cache.has(target) && !forceRecalculation) {
-      return cache.get(target);
-    }
-    if (isHidden(target)) {
-      cache.set(target, zeroBoxes);
-      return zeroBoxes;
-    }
-    var cs = getComputedStyle(target);
-    var svg2 = isSVG(target) && target.ownerSVGElement && target.getBBox();
-    var removePadding = !IE && cs.boxSizing === "border-box";
-    var switchSizes = verticalRegexp.test(cs.writingMode || "");
-    var canScrollVertically = !svg2 && scrollRegexp.test(cs.overflowY || "");
-    var canScrollHorizontally = !svg2 && scrollRegexp.test(cs.overflowX || "");
-    var paddingTop = svg2 ? 0 : parseDimension(cs.paddingTop);
-    var paddingRight = svg2 ? 0 : parseDimension(cs.paddingRight);
-    var paddingBottom = svg2 ? 0 : parseDimension(cs.paddingBottom);
-    var paddingLeft = svg2 ? 0 : parseDimension(cs.paddingLeft);
-    var borderTop2 = svg2 ? 0 : parseDimension(cs.borderTopWidth);
-    var borderRight2 = svg2 ? 0 : parseDimension(cs.borderRightWidth);
-    var borderBottom2 = svg2 ? 0 : parseDimension(cs.borderBottomWidth);
-    var borderLeft2 = svg2 ? 0 : parseDimension(cs.borderLeftWidth);
-    var horizontalPadding = paddingLeft + paddingRight;
-    var verticalPadding = paddingTop + paddingBottom;
-    var horizontalBorderArea = borderLeft2 + borderRight2;
-    var verticalBorderArea = borderTop2 + borderBottom2;
-    var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
-    var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
-    var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
-    var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
-    var contentWidth = svg2 ? svg2.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
-    var contentHeight = svg2 ? svg2.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
-    var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
-    var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
-    var boxes = freeze({
-      devicePixelContentBoxSize: size$1(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
-      borderBoxSize: size$1(borderBoxWidth, borderBoxHeight, switchSizes),
-      contentBoxSize: size$1(contentWidth, contentHeight, switchSizes),
-      contentRect: new DOMRectReadOnly$1(paddingLeft, paddingTop, contentWidth, contentHeight)
-    });
-    cache.set(target, boxes);
-    return boxes;
-  };
-  var calculateBoxSize = function(target, observedBox, forceRecalculation) {
-    var _a3 = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a3.borderBoxSize, contentBoxSize = _a3.contentBoxSize, devicePixelContentBoxSize = _a3.devicePixelContentBoxSize;
-    switch (observedBox) {
-      case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
-        return devicePixelContentBoxSize;
-      case ResizeObserverBoxOptions.BORDER_BOX:
-        return borderBoxSize;
-      default:
-        return contentBoxSize;
-    }
-  };
-  var ResizeObserverEntry = /* @__PURE__ */ function() {
-    function ResizeObserverEntry2(target) {
-      var boxes = calculateBoxSizes(target);
-      this.target = target;
-      this.contentRect = boxes.contentRect;
-      this.borderBoxSize = freeze([boxes.borderBoxSize]);
-      this.contentBoxSize = freeze([boxes.contentBoxSize]);
-      this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]);
-    }
-    return ResizeObserverEntry2;
-  }();
-  var calculateDepthForNode = function(node2) {
-    if (isHidden(node2)) {
-      return Infinity;
-    }
-    var depth = 0;
-    var parent2 = node2.parentNode;
-    while (parent2) {
-      depth += 1;
-      parent2 = parent2.parentNode;
-    }
-    return depth;
-  };
-  var broadcastActiveObservations = function() {
-    var shallowestDepth = Infinity;
-    var callbacks2 = [];
-    resizeObservers.forEach(function processObserver(ro) {
-      if (ro.activeTargets.length === 0) {
-        return;
-      }
-      var entries = [];
-      ro.activeTargets.forEach(function processTarget(ot) {
-        var entry = new ResizeObserverEntry(ot.target);
-        var targetDepth = calculateDepthForNode(ot.target);
-        entries.push(entry);
-        ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
-        if (targetDepth < shallowestDepth) {
-          shallowestDepth = targetDepth;
-        }
-      });
-      callbacks2.push(function resizeObserverCallback() {
-        ro.callback.call(ro.observer, entries, ro.observer);
-      });
-      ro.activeTargets.splice(0, ro.activeTargets.length);
-    });
-    for (var _i2 = 0, callbacks_1 = callbacks2; _i2 < callbacks_1.length; _i2++) {
-      var callback = callbacks_1[_i2];
-      callback();
-    }
-    return shallowestDepth;
-  };
-  var gatherActiveObservationsAtDepth = function(depth) {
-    resizeObservers.forEach(function processObserver(ro) {
-      ro.activeTargets.splice(0, ro.activeTargets.length);
-      ro.skippedTargets.splice(0, ro.skippedTargets.length);
-      ro.observationTargets.forEach(function processTarget(ot) {
-        if (ot.isActive()) {
-          if (calculateDepthForNode(ot.target) > depth) {
-            ro.activeTargets.push(ot);
-          } else {
-            ro.skippedTargets.push(ot);
-          }
-        }
-      });
-    });
-  };
-  var process = function() {
-    var depth = 0;
-    gatherActiveObservationsAtDepth(depth);
-    while (hasActiveObservations()) {
-      depth = broadcastActiveObservations();
-      gatherActiveObservationsAtDepth(depth);
-    }
-    if (hasSkippedObservations()) {
-      deliverResizeLoopError();
-    }
-    return depth > 0;
-  };
-  var trigger;
-  var callbacks = [];
-  var notify = function() {
-    return callbacks.splice(0).forEach(function(cb) {
-      return cb();
-    });
-  };
-  var queueMicroTask = function(callback) {
-    if (!trigger) {
-      var toggle_1 = 0;
-      var el_1 = document.createTextNode("");
-      var config2 = { characterData: true };
-      new MutationObserver(function() {
-        return notify();
-      }).observe(el_1, config2);
-      trigger = function() {
-        el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++);
-      };
-    }
-    callbacks.push(callback);
-    trigger();
-  };
-  var queueResizeObserver = function(cb) {
-    queueMicroTask(function ResizeObserver2() {
-      requestAnimationFrame(cb);
-    });
-  };
-  var watching = 0;
-  var isWatching = function() {
-    return !!watching;
-  };
-  var CATCH_PERIOD = 250;
-  var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
-  var events = [
-    "resize",
-    "load",
-    "transitionend",
-    "animationend",
-    "animationstart",
-    "animationiteration",
-    "keyup",
-    "keydown",
-    "mouseup",
-    "mousedown",
-    "mouseover",
-    "mouseout",
-    "blur",
-    "focus"
-  ];
-  var time = function(timeout2) {
-    if (timeout2 === void 0) {
-      timeout2 = 0;
-    }
-    return Date.now() + timeout2;
-  };
-  var scheduled = false;
-  var Scheduler = function() {
-    function Scheduler2() {
-      var _this = this;
-      this.stopped = true;
-      this.listener = function() {
-        return _this.schedule();
-      };
-    }
-    Scheduler2.prototype.run = function(timeout2) {
-      var _this = this;
-      if (timeout2 === void 0) {
-        timeout2 = CATCH_PERIOD;
-      }
-      if (scheduled) {
-        return;
-      }
-      scheduled = true;
-      var until = time(timeout2);
-      queueResizeObserver(function() {
-        var elementsHaveResized = false;
-        try {
-          elementsHaveResized = process();
-        } finally {
-          scheduled = false;
-          timeout2 = until - time();
-          if (!isWatching()) {
-            return;
-          }
-          if (elementsHaveResized) {
-            _this.run(1e3);
-          } else if (timeout2 > 0) {
-            _this.run(timeout2);
-          } else {
-            _this.start();
-          }
-        }
-      });
-    };
-    Scheduler2.prototype.schedule = function() {
-      this.stop();
-      this.run();
-    };
-    Scheduler2.prototype.observe = function() {
-      var _this = this;
-      var cb = function() {
-        return _this.observer && _this.observer.observe(document.body, observerConfig);
-      };
-      document.body ? cb() : global$1.addEventListener("DOMContentLoaded", cb);
-    };
-    Scheduler2.prototype.start = function() {
-      var _this = this;
-      if (this.stopped) {
-        this.stopped = false;
-        this.observer = new MutationObserver(this.listener);
-        this.observe();
-        events.forEach(function(name) {
-          return global$1.addEventListener(name, _this.listener, true);
-        });
-      }
-    };
-    Scheduler2.prototype.stop = function() {
-      var _this = this;
-      if (!this.stopped) {
-        this.observer && this.observer.disconnect();
-        events.forEach(function(name) {
-          return global$1.removeEventListener(name, _this.listener, true);
-        });
-        this.stopped = true;
-      }
-    };
-    return Scheduler2;
-  }();
-  var scheduler = new Scheduler();
-  var updateCount = function(n2) {
-    !watching && n2 > 0 && scheduler.start();
-    watching += n2;
-    !watching && scheduler.stop();
-  };
-  var skipNotifyOnElement = function(target) {
-    return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline";
-  };
-  var ResizeObservation = function() {
-    function ResizeObservation2(target, observedBox) {
-      this.target = target;
-      this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
-      this.lastReportedSize = {
-        inlineSize: 0,
-        blockSize: 0
-      };
-    }
-    ResizeObservation2.prototype.isActive = function() {
-      var size2 = calculateBoxSize(this.target, this.observedBox, true);
-      if (skipNotifyOnElement(this.target)) {
-        this.lastReportedSize = size2;
-      }
-      if (this.lastReportedSize.inlineSize !== size2.inlineSize || this.lastReportedSize.blockSize !== size2.blockSize) {
-        return true;
-      }
-      return false;
-    };
-    return ResizeObservation2;
-  }();
-  var ResizeObserverDetail = /* @__PURE__ */ function() {
-    function ResizeObserverDetail2(resizeObserver, callback) {
-      this.activeTargets = [];
-      this.skippedTargets = [];
-      this.observationTargets = [];
-      this.observer = resizeObserver;
-      this.callback = callback;
-    }
-    return ResizeObserverDetail2;
-  }();
-  var observerMap = /* @__PURE__ */ new WeakMap();
-  var getObservationIndex = function(observationTargets, target) {
-    for (var i2 = 0; i2 < observationTargets.length; i2 += 1) {
-      if (observationTargets[i2].target === target) {
-        return i2;
-      }
-    }
-    return -1;
-  };
-  var ResizeObserverController = function() {
-    function ResizeObserverController2() {
-    }
-    ResizeObserverController2.connect = function(resizeObserver, callback) {
-      var detail = new ResizeObserverDetail(resizeObserver, callback);
-      observerMap.set(resizeObserver, detail);
-    };
-    ResizeObserverController2.observe = function(resizeObserver, target, options2) {
-      var detail = observerMap.get(resizeObserver);
-      var firstObservation = detail.observationTargets.length === 0;
-      if (getObservationIndex(detail.observationTargets, target) < 0) {
-        firstObservation && resizeObservers.push(detail);
-        detail.observationTargets.push(new ResizeObservation(target, options2 && options2.box));
-        updateCount(1);
-        scheduler.schedule();
-      }
-    };
-    ResizeObserverController2.unobserve = function(resizeObserver, target) {
-      var detail = observerMap.get(resizeObserver);
-      var index2 = getObservationIndex(detail.observationTargets, target);
-      var lastObservation = detail.observationTargets.length === 1;
-      if (index2 >= 0) {
-        lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
-        detail.observationTargets.splice(index2, 1);
-        updateCount(-1);
-      }
-    };
-    ResizeObserverController2.disconnect = function(resizeObserver) {
-      var _this = this;
-      var detail = observerMap.get(resizeObserver);
-      detail.observationTargets.slice().forEach(function(ot) {
-        return _this.unobserve(resizeObserver, ot.target);
-      });
-      detail.activeTargets.splice(0, detail.activeTargets.length);
-    };
-    return ResizeObserverController2;
-  }();
-  var ResizeObserver$2 = function() {
-    function ResizeObserver2(callback) {
-      if (arguments.length === 0) {
-        throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
-      }
-      if (typeof callback !== "function") {
-        throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
-      }
-      ResizeObserverController.connect(this, callback);
-    }
-    ResizeObserver2.prototype.observe = function(target, options2) {
-      if (arguments.length === 0) {
-        throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
-      }
-      if (!isElement$1(target)) {
-        throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
-      }
-      ResizeObserverController.observe(this, target, options2);
-    };
-    ResizeObserver2.prototype.unobserve = function(target) {
-      if (arguments.length === 0) {
-        throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
-      }
-      if (!isElement$1(target)) {
-        throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
-      }
-      ResizeObserverController.unobserve(this, target);
-    };
-    ResizeObserver2.prototype.disconnect = function() {
-      ResizeObserverController.disconnect(this);
-    };
-    ResizeObserver2.toString = function() {
-      return "function ResizeObserver () { [polyfill code] }";
-    };
-    return ResizeObserver2;
-  }();
-  const usePassiveLayoutEffect = React$2[typeof document !== "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"];
-  const useLatest = (current) => {
-    const storedValue = React__namespace.useRef(current);
-    React__namespace.useEffect(() => {
-      storedValue.current = current;
-    });
-    return storedValue;
-  };
-  const ResizeObserver$1 = typeof window !== "undefined" && "ResizeObserver" in window ? (
-    // @ts-ignore
-    window.ResizeObserver
-  ) : ResizeObserver$2;
-  function _ref$1() {
-  }
-  function useResizeObserver(target, callback) {
-    const resizeObserver = getResizeObserver();
-    const storedCallback = useLatest(callback);
-    usePassiveLayoutEffect(() => {
-      let didUnsubscribe = false;
-      const targetEl = target && "current" in target ? target.current : target;
-      if (!targetEl) return _ref$1;
-      function cb(entry, observer) {
-        if (didUnsubscribe) return;
-        storedCallback.current(entry, observer);
-      }
-      resizeObserver.subscribe(targetEl, cb);
-      return () => {
-        didUnsubscribe = true;
-        resizeObserver.unsubscribe(targetEl, cb);
-      };
-    }, [target, resizeObserver, storedCallback]);
-    return resizeObserver.observer;
-  }
-  function createResizeObserver() {
-    let ticking = false;
-    let allEntries = [];
-    const callbacks2 = /* @__PURE__ */ new Map();
-    const observer = new ResizeObserver$1((entries, obs) => {
-      allEntries = allEntries.concat(entries);
-      function _ref22() {
-        const triggered = /* @__PURE__ */ new Set();
-        for (let i2 = 0; i2 < allEntries.length; i2++) {
-          if (triggered.has(allEntries[i2].target)) continue;
-          triggered.add(allEntries[i2].target);
-          const cbs = callbacks2.get(allEntries[i2].target);
-          cbs === null || cbs === void 0 ? void 0 : cbs.forEach((cb) => cb(allEntries[i2], obs));
-        }
-        allEntries = [];
-        ticking = false;
-      }
-      if (!ticking) {
-        window.requestAnimationFrame(_ref22);
-      }
-      ticking = true;
-    });
-    return {
-      observer,
-      subscribe(target, callback) {
-        var _callbacks$get;
-        observer.observe(target);
-        const cbs = (_callbacks$get = callbacks2.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
-        cbs.push(callback);
-        callbacks2.set(target, cbs);
-      },
-      unsubscribe(target, callback) {
-        var _callbacks$get2;
-        const cbs = (_callbacks$get2 = callbacks2.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
-        if (cbs.length === 1) {
-          observer.unobserve(target);
-          callbacks2.delete(target);
-          return;
-        }
-        const cbIndex = cbs.indexOf(callback);
-        if (cbIndex !== -1) cbs.splice(cbIndex, 1);
-        callbacks2.set(target, cbs);
-      }
-    };
-  }
-  let _resizeObserver;
-  const getResizeObserver = () => !_resizeObserver ? _resizeObserver = createResizeObserver() : _resizeObserver;
-  function ExpandCollapseButton(props) {
-    const { isExpanded, ...buttonProps } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { ...buttonProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      IconSvg,
-      {
-        icon: isExpanded ? "minusBoxOutline" : "addBoxOutline",
-        sx: {
-          color: "grey.600",
-          height: "16px",
-          verticalAlign: "top",
-          "&:hover": {
-            color: "grey.700"
-          }
-        }
-      }
-    ) });
-  }
-  function ExpandableTableDataCell(props) {
-    const [isExpanded, setIsExpanded] = React$2.useState(false);
-    const [isOverflowingWhenNotExpanded, setIsOverflowingWhenNotExpanded] = React$2.useState(false);
-    const tdRef = React$2.useRef(null);
-    useResizeObserver(tdRef, ({ target }) => {
-      if (!isExpanded) {
-        if (target) {
-          const contentElement = target.getElementsByTagName("p")[0];
-          if (contentElement) {
-            setIsOverflowingWhenNotExpanded(
-              contentElement.scrollHeight > contentElement.clientHeight || contentElement.scrollWidth > contentElement.clientWidth
-            );
-          }
-        }
-      }
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "td",
-      {
-        ...props,
-        className: `ExpandableTableData ${props.className ? props.className : ""}`,
-        "aria-expanded": isExpanded,
-        ref: tdRef,
-        children: [
-          isOverflowingWhenNotExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ExpandCollapseButton,
-            {
-              isExpanded,
-              className: "ExpandableTableData__expandButton",
-              onClick: () => setIsExpanded(!isExpanded)
-            }
-          ),
-          props.children
-        ]
-      }
-    );
-  }
   /**
      * table-core
      *
@@ -99521,7 +99050,7 @@ ${e2.message}`);
     })(typeof window === "object" ? window : commonjsGlobal);
   })(uaParser, uaParser.exports);
   var uaParserExports = uaParser.exports;
-  function DirectDownloadIcon(props) {
+  const DirectDownloadIcon = React$2.forwardRef(function DirectDownloadIcon2(props, ref2) {
     const {
       isExternalFile,
       onClick,
@@ -99537,6 +99066,7 @@ ${e2.message}`);
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
+          ref: ref2,
           className: "btn-download-icon",
           onClick: (event) => {
             if (onClick) {
@@ -99561,6 +99091,7 @@ ${e2.message}`);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
+          ref: ref2,
           className: "btn-download-icon",
           onClick: (event) => {
             getDownloadLink();
@@ -99574,7 +99105,7 @@ ${e2.message}`);
       );
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
-  }
+  });
   function DirectDownload(props) {
     var _a3;
     const { accessToken } = useSynapseContext();
@@ -99677,7 +99208,7 @@ ${e2.message}`);
         title: isExternalFile ? "Navigate to external link" : "Download this file individually",
         enterNextDelay: TOOLTIP_DELAY_SHOW,
         placement: "left",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           DirectDownloadIcon,
           {
             isExternalFile,
@@ -99690,7 +99221,7 @@ ${e2.message}`);
             fileName,
             iconSvgPropOverrides
           }
-        ) })
+        )
       }
     );
   }
@@ -102282,7 +101813,7 @@ ${e2.message}`);
   function _EMOTION_STRINGIFIED_CSS_ERROR__$2() {
     return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
   }
-  var _ref = dist$1.process.env.NODE_ENV === "production" ? {
+  var _ref$1 = dist$1.process.env.NODE_ENV === "production" ? {
     name: "7pg0cj-a11yText",
     styles: "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap"
   } : {
@@ -102293,7 +101824,7 @@ ${e2.message}`);
   };
   var A11yText = function A11yText2(props) {
     return jsx("span", _extends$3({
-      css: _ref
+      css: _ref$1
     }, props));
   };
   var A11yText$1 = A11yText;
@@ -104575,23 +104106,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 +108982,7 @@ ${e2.message}`);
       addValueToSelectedFacet: addValueToSelectedFacet2,
       removeSelectedFacet: removeSelectedFacet2,
       removeValueFromSelectedFacet: removeValueFromSelectedFacet2,
-      executeQueryRequest
+      resetDebounceTimer
     } = useQueryContext();
     const data = useAtomValue(tableQueryDataAtom);
     const { getColumnDisplayName } = useQueryVisualizationContext();
@@ -109534,12 +109067,7 @@ ${e2.message}`);
         dropdownType,
         hideCollapsible,
         onHoverOverValue: () => {
-          executeQueryRequest(
-            (request) => {
-              return cloneDeep$3(request);
-            },
-            { debounce: true }
-          );
+          resetDebounceTimer();
         },
         onAddValueToSelection: (value) => {
           addValueToSelectedFacet2(
@@ -112884,6 +112412,23 @@ ${e2.message}`);
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: String(value) });
   }
+  function ExpandCollapseButton(props) {
+    const { isExpanded, ...buttonProps } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { ...buttonProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      IconSvg,
+      {
+        icon: isExpanded ? "minusBoxOutline" : "addBoxOutline",
+        sx: {
+          color: "grey.600",
+          height: "16px",
+          verticalAlign: "top",
+          "&:hover": {
+            color: "grey.700"
+          }
+        }
+      }
+    ) });
+  }
   function JSONArrayRenderer(props) {
     const { value } = props;
     const [expanded, setExpanded] = React$2.useState(false);
@@ -114626,21 +114171,22 @@ ${e2.message}`);
     }
   });
   const getEntityOrRowId = (props) => {
-    var _a3;
+    var _a3, _b2;
     const { row, table: table2 } = props;
-    const rowEntityIDColumnIndex = table2.options.meta.rowEntityIDColumnIndex;
-    const entityId = rowEntityIDColumnIndex !== void 0 ? row.original.values[rowEntityIDColumnIndex] : (_a3 = row.original.rowId) == null ? void 0 : _a3.toString();
+    const rowEntityIDColumnIndex = (_a3 = table2.options.meta) == null ? void 0 : _a3.rowEntityIDColumnIndex;
+    const entityId = rowEntityIDColumnIndex !== void 0 ? row.original.values[rowEntityIDColumnIndex] : (_b2 = row.original.rowId) == null ? void 0 : _b2.toString();
     return entityId;
   };
   const isRowEntityColumn = (props) => {
+    var _a3;
     const { table: table2 } = props;
-    return table2.options.meta.rowEntityVersionColumnIndex !== void 0;
+    return ((_a3 = table2.options.meta) == null ? void 0 : _a3.rowEntityVersionColumnIndex) !== void 0;
   };
   const getEntityOrRowVersion = (props) => {
-    var _a3;
+    var _a3, _b2;
     const { row, table: table2 } = props;
-    const rowEntityVersionColumnIndex = table2.options.meta.rowEntityVersionColumnIndex;
-    const versionNumber = rowEntityVersionColumnIndex !== void 0 ? row.original.values[rowEntityVersionColumnIndex] : (_a3 = row.original.versionNumber) == null ? void 0 : _a3.toString();
+    const rowEntityVersionColumnIndex = (_a3 = table2.options.meta) == null ? void 0 : _a3.rowEntityVersionColumnIndex;
+    const versionNumber = rowEntityVersionColumnIndex !== void 0 ? row.original.values[rowEntityVersionColumnIndex] : (_b2 = row.original.versionNumber) == null ? void 0 : _b2.toString();
     return versionNumber;
   };
   function AccessCell(props) {
@@ -114886,6 +114432,762 @@ ${e2.message}`);
       dataHasBeenPrefetched: !isLoadingEntityData && !isLoadingFileHandleData && !isLoadingUserGroupData
     };
   }
+  const StyledTableContainer = styled(Box)(({ theme: theme3, density = "default" }) => ({
+    overflow: "auto",
+    paddingLeft: "2px",
+    th: {
+      height: "38px",
+      backgroundColor: theme3.palette.grey[200],
+      borderRight: "1px solid",
+      borderColor: theme3.palette.grey[400]
+    },
+    ["th:first-of-type"]: {
+      paddingLeft: "10px"
+    },
+    ["td:first-of-type"]: {
+      paddingLeft: "10px"
+    },
+    ["tr:nth-of-type(2n)"]: {
+      backgroundColor: theme3.palette.grey[100]
+    },
+    ["th,td"]: {
+      position: "relative",
+      paddingLeft: theme3.spacing(density === "compact" ? 0 : 1),
+      paddingRight: theme3.spacing(density === "compact" ? 0 : 1)
+    },
+    td: {
+      paddingTop: theme3.spacing(density === "compact" ? 0 : 1),
+      paddingBottom: theme3.spacing(density === "compact" ? 0 : 1)
+    },
+    ".resizer": {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      height: "100%",
+      width: "3px",
+      padding: 0,
+      background: "rgba(0, 0, 0, 0.5)",
+      cursor: "col-resize",
+      userSelect: "none",
+      touchAction: "none"
+    },
+    ".resizer.isResizing": {
+      background: theme3.palette.primary.main,
+      opacity: 1
+    },
+    "@media (hover: hover)": {
+      ".resizer": {
+        opacity: 0,
+        "*:hover > .resizer": {
+          opacity: 1
+        }
+      }
+    }
+  }));
+  function getColumnSizeCssVariable(columnId) {
+    return `--col-${columnId}-size`;
+  }
+  function getHeaderSizeCssVariable(headerId) {
+    return `--header-${headerId}-size`;
+  }
+  var resizeObservers = [];
+  var hasActiveObservations = function() {
+    return resizeObservers.some(function(ro) {
+      return ro.activeTargets.length > 0;
+    });
+  };
+  var hasSkippedObservations = function() {
+    return resizeObservers.some(function(ro) {
+      return ro.skippedTargets.length > 0;
+    });
+  };
+  var msg = "ResizeObserver loop completed with undelivered notifications.";
+  var deliverResizeLoopError = function() {
+    var event;
+    if (typeof ErrorEvent === "function") {
+      event = new ErrorEvent("error", {
+        message: msg
+      });
+    } else {
+      event = document.createEvent("Event");
+      event.initEvent("error", false, false);
+      event.message = msg;
+    }
+    window.dispatchEvent(event);
+  };
+  var ResizeObserverBoxOptions;
+  (function(ResizeObserverBoxOptions2) {
+    ResizeObserverBoxOptions2["BORDER_BOX"] = "border-box";
+    ResizeObserverBoxOptions2["CONTENT_BOX"] = "content-box";
+    ResizeObserverBoxOptions2["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
+  })(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
+  var freeze = function(obj) {
+    return Object.freeze(obj);
+  };
+  var ResizeObserverSize = /* @__PURE__ */ function() {
+    function ResizeObserverSize2(inlineSize, blockSize) {
+      this.inlineSize = inlineSize;
+      this.blockSize = blockSize;
+      freeze(this);
+    }
+    return ResizeObserverSize2;
+  }();
+  var DOMRectReadOnly$1 = function() {
+    function DOMRectReadOnly2(x2, y2, width2, height2) {
+      this.x = x2;
+      this.y = y2;
+      this.width = width2;
+      this.height = height2;
+      this.top = this.y;
+      this.left = this.x;
+      this.bottom = this.top + this.height;
+      this.right = this.left + this.width;
+      return freeze(this);
+    }
+    DOMRectReadOnly2.prototype.toJSON = function() {
+      var _a3 = this, x2 = _a3.x, y2 = _a3.y, top2 = _a3.top, right2 = _a3.right, bottom2 = _a3.bottom, left2 = _a3.left, width2 = _a3.width, height2 = _a3.height;
+      return { x: x2, y: y2, top: top2, right: right2, bottom: bottom2, left: left2, width: width2, height: height2 };
+    };
+    DOMRectReadOnly2.fromRect = function(rectangle) {
+      return new DOMRectReadOnly2(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+    };
+    return DOMRectReadOnly2;
+  }();
+  var isSVG = function(target) {
+    return target instanceof SVGElement && "getBBox" in target;
+  };
+  var isHidden = function(target) {
+    if (isSVG(target)) {
+      var _a3 = target.getBBox(), width2 = _a3.width, height2 = _a3.height;
+      return !width2 && !height2;
+    }
+    var _b2 = target, offsetWidth = _b2.offsetWidth, offsetHeight = _b2.offsetHeight;
+    return !(offsetWidth || offsetHeight || target.getClientRects().length);
+  };
+  var isElement$1 = function(obj) {
+    var _a3;
+    if (obj instanceof Element) {
+      return true;
+    }
+    var scope2 = (_a3 = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a3 === void 0 ? void 0 : _a3.defaultView;
+    return !!(scope2 && obj instanceof scope2.Element);
+  };
+  var isReplacedElement = function(target) {
+    switch (target.tagName) {
+      case "INPUT":
+        if (target.type !== "image") {
+          break;
+        }
+      case "VIDEO":
+      case "AUDIO":
+      case "EMBED":
+      case "OBJECT":
+      case "CANVAS":
+      case "IFRAME":
+      case "IMG":
+        return true;
+    }
+    return false;
+  };
+  var global$1 = typeof window !== "undefined" ? window : {};
+  var cache = /* @__PURE__ */ new WeakMap();
+  var scrollRegexp = /auto|scroll/;
+  var verticalRegexp = /^tb|vertical/;
+  var IE = /msie|trident/i.test(global$1.navigator && global$1.navigator.userAgent);
+  var parseDimension = function(pixel) {
+    return parseFloat(pixel || "0");
+  };
+  var size$1 = function(inlineSize, blockSize, switchSizes) {
+    if (inlineSize === void 0) {
+      inlineSize = 0;
+    }
+    if (blockSize === void 0) {
+      blockSize = 0;
+    }
+    if (switchSizes === void 0) {
+      switchSizes = false;
+    }
+    return new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
+  };
+  var zeroBoxes = freeze({
+    devicePixelContentBoxSize: size$1(),
+    borderBoxSize: size$1(),
+    contentBoxSize: size$1(),
+    contentRect: new DOMRectReadOnly$1(0, 0, 0, 0)
+  });
+  var calculateBoxSizes = function(target, forceRecalculation) {
+    if (forceRecalculation === void 0) {
+      forceRecalculation = false;
+    }
+    if (cache.has(target) && !forceRecalculation) {
+      return cache.get(target);
+    }
+    if (isHidden(target)) {
+      cache.set(target, zeroBoxes);
+      return zeroBoxes;
+    }
+    var cs = getComputedStyle(target);
+    var svg2 = isSVG(target) && target.ownerSVGElement && target.getBBox();
+    var removePadding = !IE && cs.boxSizing === "border-box";
+    var switchSizes = verticalRegexp.test(cs.writingMode || "");
+    var canScrollVertically = !svg2 && scrollRegexp.test(cs.overflowY || "");
+    var canScrollHorizontally = !svg2 && scrollRegexp.test(cs.overflowX || "");
+    var paddingTop = svg2 ? 0 : parseDimension(cs.paddingTop);
+    var paddingRight = svg2 ? 0 : parseDimension(cs.paddingRight);
+    var paddingBottom = svg2 ? 0 : parseDimension(cs.paddingBottom);
+    var paddingLeft = svg2 ? 0 : parseDimension(cs.paddingLeft);
+    var borderTop2 = svg2 ? 0 : parseDimension(cs.borderTopWidth);
+    var borderRight2 = svg2 ? 0 : parseDimension(cs.borderRightWidth);
+    var borderBottom2 = svg2 ? 0 : parseDimension(cs.borderBottomWidth);
+    var borderLeft2 = svg2 ? 0 : parseDimension(cs.borderLeftWidth);
+    var horizontalPadding = paddingLeft + paddingRight;
+    var verticalPadding = paddingTop + paddingBottom;
+    var horizontalBorderArea = borderLeft2 + borderRight2;
+    var verticalBorderArea = borderTop2 + borderBottom2;
+    var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
+    var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
+    var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
+    var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
+    var contentWidth = svg2 ? svg2.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
+    var contentHeight = svg2 ? svg2.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
+    var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
+    var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
+    var boxes = freeze({
+      devicePixelContentBoxSize: size$1(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
+      borderBoxSize: size$1(borderBoxWidth, borderBoxHeight, switchSizes),
+      contentBoxSize: size$1(contentWidth, contentHeight, switchSizes),
+      contentRect: new DOMRectReadOnly$1(paddingLeft, paddingTop, contentWidth, contentHeight)
+    });
+    cache.set(target, boxes);
+    return boxes;
+  };
+  var calculateBoxSize = function(target, observedBox, forceRecalculation) {
+    var _a3 = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a3.borderBoxSize, contentBoxSize = _a3.contentBoxSize, devicePixelContentBoxSize = _a3.devicePixelContentBoxSize;
+    switch (observedBox) {
+      case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
+        return devicePixelContentBoxSize;
+      case ResizeObserverBoxOptions.BORDER_BOX:
+        return borderBoxSize;
+      default:
+        return contentBoxSize;
+    }
+  };
+  var ResizeObserverEntry = /* @__PURE__ */ function() {
+    function ResizeObserverEntry2(target) {
+      var boxes = calculateBoxSizes(target);
+      this.target = target;
+      this.contentRect = boxes.contentRect;
+      this.borderBoxSize = freeze([boxes.borderBoxSize]);
+      this.contentBoxSize = freeze([boxes.contentBoxSize]);
+      this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]);
+    }
+    return ResizeObserverEntry2;
+  }();
+  var calculateDepthForNode = function(node2) {
+    if (isHidden(node2)) {
+      return Infinity;
+    }
+    var depth = 0;
+    var parent2 = node2.parentNode;
+    while (parent2) {
+      depth += 1;
+      parent2 = parent2.parentNode;
+    }
+    return depth;
+  };
+  var broadcastActiveObservations = function() {
+    var shallowestDepth = Infinity;
+    var callbacks2 = [];
+    resizeObservers.forEach(function processObserver(ro) {
+      if (ro.activeTargets.length === 0) {
+        return;
+      }
+      var entries = [];
+      ro.activeTargets.forEach(function processTarget(ot) {
+        var entry = new ResizeObserverEntry(ot.target);
+        var targetDepth = calculateDepthForNode(ot.target);
+        entries.push(entry);
+        ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
+        if (targetDepth < shallowestDepth) {
+          shallowestDepth = targetDepth;
+        }
+      });
+      callbacks2.push(function resizeObserverCallback() {
+        ro.callback.call(ro.observer, entries, ro.observer);
+      });
+      ro.activeTargets.splice(0, ro.activeTargets.length);
+    });
+    for (var _i2 = 0, callbacks_1 = callbacks2; _i2 < callbacks_1.length; _i2++) {
+      var callback = callbacks_1[_i2];
+      callback();
+    }
+    return shallowestDepth;
+  };
+  var gatherActiveObservationsAtDepth = function(depth) {
+    resizeObservers.forEach(function processObserver(ro) {
+      ro.activeTargets.splice(0, ro.activeTargets.length);
+      ro.skippedTargets.splice(0, ro.skippedTargets.length);
+      ro.observationTargets.forEach(function processTarget(ot) {
+        if (ot.isActive()) {
+          if (calculateDepthForNode(ot.target) > depth) {
+            ro.activeTargets.push(ot);
+          } else {
+            ro.skippedTargets.push(ot);
+          }
+        }
+      });
+    });
+  };
+  var process = function() {
+    var depth = 0;
+    gatherActiveObservationsAtDepth(depth);
+    while (hasActiveObservations()) {
+      depth = broadcastActiveObservations();
+      gatherActiveObservationsAtDepth(depth);
+    }
+    if (hasSkippedObservations()) {
+      deliverResizeLoopError();
+    }
+    return depth > 0;
+  };
+  var trigger;
+  var callbacks = [];
+  var notify = function() {
+    return callbacks.splice(0).forEach(function(cb) {
+      return cb();
+    });
+  };
+  var queueMicroTask = function(callback) {
+    if (!trigger) {
+      var toggle_1 = 0;
+      var el_1 = document.createTextNode("");
+      var config2 = { characterData: true };
+      new MutationObserver(function() {
+        return notify();
+      }).observe(el_1, config2);
+      trigger = function() {
+        el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++);
+      };
+    }
+    callbacks.push(callback);
+    trigger();
+  };
+  var queueResizeObserver = function(cb) {
+    queueMicroTask(function ResizeObserver2() {
+      requestAnimationFrame(cb);
+    });
+  };
+  var watching = 0;
+  var isWatching = function() {
+    return !!watching;
+  };
+  var CATCH_PERIOD = 250;
+  var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
+  var events = [
+    "resize",
+    "load",
+    "transitionend",
+    "animationend",
+    "animationstart",
+    "animationiteration",
+    "keyup",
+    "keydown",
+    "mouseup",
+    "mousedown",
+    "mouseover",
+    "mouseout",
+    "blur",
+    "focus"
+  ];
+  var time = function(timeout2) {
+    if (timeout2 === void 0) {
+      timeout2 = 0;
+    }
+    return Date.now() + timeout2;
+  };
+  var scheduled = false;
+  var Scheduler = function() {
+    function Scheduler2() {
+      var _this = this;
+      this.stopped = true;
+      this.listener = function() {
+        return _this.schedule();
+      };
+    }
+    Scheduler2.prototype.run = function(timeout2) {
+      var _this = this;
+      if (timeout2 === void 0) {
+        timeout2 = CATCH_PERIOD;
+      }
+      if (scheduled) {
+        return;
+      }
+      scheduled = true;
+      var until = time(timeout2);
+      queueResizeObserver(function() {
+        var elementsHaveResized = false;
+        try {
+          elementsHaveResized = process();
+        } finally {
+          scheduled = false;
+          timeout2 = until - time();
+          if (!isWatching()) {
+            return;
+          }
+          if (elementsHaveResized) {
+            _this.run(1e3);
+          } else if (timeout2 > 0) {
+            _this.run(timeout2);
+          } else {
+            _this.start();
+          }
+        }
+      });
+    };
+    Scheduler2.prototype.schedule = function() {
+      this.stop();
+      this.run();
+    };
+    Scheduler2.prototype.observe = function() {
+      var _this = this;
+      var cb = function() {
+        return _this.observer && _this.observer.observe(document.body, observerConfig);
+      };
+      document.body ? cb() : global$1.addEventListener("DOMContentLoaded", cb);
+    };
+    Scheduler2.prototype.start = function() {
+      var _this = this;
+      if (this.stopped) {
+        this.stopped = false;
+        this.observer = new MutationObserver(this.listener);
+        this.observe();
+        events.forEach(function(name) {
+          return global$1.addEventListener(name, _this.listener, true);
+        });
+      }
+    };
+    Scheduler2.prototype.stop = function() {
+      var _this = this;
+      if (!this.stopped) {
+        this.observer && this.observer.disconnect();
+        events.forEach(function(name) {
+          return global$1.removeEventListener(name, _this.listener, true);
+        });
+        this.stopped = true;
+      }
+    };
+    return Scheduler2;
+  }();
+  var scheduler = new Scheduler();
+  var updateCount = function(n2) {
+    !watching && n2 > 0 && scheduler.start();
+    watching += n2;
+    !watching && scheduler.stop();
+  };
+  var skipNotifyOnElement = function(target) {
+    return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline";
+  };
+  var ResizeObservation = function() {
+    function ResizeObservation2(target, observedBox) {
+      this.target = target;
+      this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
+      this.lastReportedSize = {
+        inlineSize: 0,
+        blockSize: 0
+      };
+    }
+    ResizeObservation2.prototype.isActive = function() {
+      var size2 = calculateBoxSize(this.target, this.observedBox, true);
+      if (skipNotifyOnElement(this.target)) {
+        this.lastReportedSize = size2;
+      }
+      if (this.lastReportedSize.inlineSize !== size2.inlineSize || this.lastReportedSize.blockSize !== size2.blockSize) {
+        return true;
+      }
+      return false;
+    };
+    return ResizeObservation2;
+  }();
+  var ResizeObserverDetail = /* @__PURE__ */ function() {
+    function ResizeObserverDetail2(resizeObserver, callback) {
+      this.activeTargets = [];
+      this.skippedTargets = [];
+      this.observationTargets = [];
+      this.observer = resizeObserver;
+      this.callback = callback;
+    }
+    return ResizeObserverDetail2;
+  }();
+  var observerMap = /* @__PURE__ */ new WeakMap();
+  var getObservationIndex = function(observationTargets, target) {
+    for (var i2 = 0; i2 < observationTargets.length; i2 += 1) {
+      if (observationTargets[i2].target === target) {
+        return i2;
+      }
+    }
+    return -1;
+  };
+  var ResizeObserverController = function() {
+    function ResizeObserverController2() {
+    }
+    ResizeObserverController2.connect = function(resizeObserver, callback) {
+      var detail = new ResizeObserverDetail(resizeObserver, callback);
+      observerMap.set(resizeObserver, detail);
+    };
+    ResizeObserverController2.observe = function(resizeObserver, target, options2) {
+      var detail = observerMap.get(resizeObserver);
+      var firstObservation = detail.observationTargets.length === 0;
+      if (getObservationIndex(detail.observationTargets, target) < 0) {
+        firstObservation && resizeObservers.push(detail);
+        detail.observationTargets.push(new ResizeObservation(target, options2 && options2.box));
+        updateCount(1);
+        scheduler.schedule();
+      }
+    };
+    ResizeObserverController2.unobserve = function(resizeObserver, target) {
+      var detail = observerMap.get(resizeObserver);
+      var index2 = getObservationIndex(detail.observationTargets, target);
+      var lastObservation = detail.observationTargets.length === 1;
+      if (index2 >= 0) {
+        lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
+        detail.observationTargets.splice(index2, 1);
+        updateCount(-1);
+      }
+    };
+    ResizeObserverController2.disconnect = function(resizeObserver) {
+      var _this = this;
+      var detail = observerMap.get(resizeObserver);
+      detail.observationTargets.slice().forEach(function(ot) {
+        return _this.unobserve(resizeObserver, ot.target);
+      });
+      detail.activeTargets.splice(0, detail.activeTargets.length);
+    };
+    return ResizeObserverController2;
+  }();
+  var ResizeObserver$2 = function() {
+    function ResizeObserver2(callback) {
+      if (arguments.length === 0) {
+        throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
+      }
+      if (typeof callback !== "function") {
+        throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
+      }
+      ResizeObserverController.connect(this, callback);
+    }
+    ResizeObserver2.prototype.observe = function(target, options2) {
+      if (arguments.length === 0) {
+        throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
+      }
+      if (!isElement$1(target)) {
+        throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
+      }
+      ResizeObserverController.observe(this, target, options2);
+    };
+    ResizeObserver2.prototype.unobserve = function(target) {
+      if (arguments.length === 0) {
+        throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
+      }
+      if (!isElement$1(target)) {
+        throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
+      }
+      ResizeObserverController.unobserve(this, target);
+    };
+    ResizeObserver2.prototype.disconnect = function() {
+      ResizeObserverController.disconnect(this);
+    };
+    ResizeObserver2.toString = function() {
+      return "function ResizeObserver () { [polyfill code] }";
+    };
+    return ResizeObserver2;
+  }();
+  const usePassiveLayoutEffect = React$2[typeof document !== "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"];
+  const useLatest = (current) => {
+    const storedValue = React__namespace.useRef(current);
+    React__namespace.useEffect(() => {
+      storedValue.current = current;
+    });
+    return storedValue;
+  };
+  const ResizeObserver$1 = typeof window !== "undefined" && "ResizeObserver" in window ? (
+    // @ts-ignore
+    window.ResizeObserver
+  ) : ResizeObserver$2;
+  function _ref() {
+  }
+  function useResizeObserver(target, callback) {
+    const resizeObserver = getResizeObserver();
+    const storedCallback = useLatest(callback);
+    usePassiveLayoutEffect(() => {
+      let didUnsubscribe = false;
+      const targetEl = target && "current" in target ? target.current : target;
+      if (!targetEl) return _ref;
+      function cb(entry, observer) {
+        if (didUnsubscribe) return;
+        storedCallback.current(entry, observer);
+      }
+      resizeObserver.subscribe(targetEl, cb);
+      return () => {
+        didUnsubscribe = true;
+        resizeObserver.unsubscribe(targetEl, cb);
+      };
+    }, [target, resizeObserver, storedCallback]);
+    return resizeObserver.observer;
+  }
+  function createResizeObserver() {
+    let ticking = false;
+    let allEntries = [];
+    const callbacks2 = /* @__PURE__ */ new Map();
+    const observer = new ResizeObserver$1((entries, obs) => {
+      allEntries = allEntries.concat(entries);
+      function _ref22() {
+        const triggered = /* @__PURE__ */ new Set();
+        for (let i2 = 0; i2 < allEntries.length; i2++) {
+          if (triggered.has(allEntries[i2].target)) continue;
+          triggered.add(allEntries[i2].target);
+          const cbs = callbacks2.get(allEntries[i2].target);
+          cbs === null || cbs === void 0 ? void 0 : cbs.forEach((cb) => cb(allEntries[i2], obs));
+        }
+        allEntries = [];
+        ticking = false;
+      }
+      if (!ticking) {
+        window.requestAnimationFrame(_ref22);
+      }
+      ticking = true;
+    });
+    return {
+      observer,
+      subscribe(target, callback) {
+        var _callbacks$get;
+        observer.observe(target);
+        const cbs = (_callbacks$get = callbacks2.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
+        cbs.push(callback);
+        callbacks2.set(target, cbs);
+      },
+      unsubscribe(target, callback) {
+        var _callbacks$get2;
+        const cbs = (_callbacks$get2 = callbacks2.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
+        if (cbs.length === 1) {
+          observer.unobserve(target);
+          callbacks2.delete(target);
+          return;
+        }
+        const cbIndex = cbs.indexOf(callback);
+        if (cbIndex !== -1) cbs.splice(cbIndex, 1);
+        callbacks2.set(target, cbs);
+      }
+    };
+  }
+  let _resizeObserver;
+  const getResizeObserver = () => !_resizeObserver ? _resizeObserver = createResizeObserver() : _resizeObserver;
+  function ExpandableTableDataCell(props) {
+    const [isExpanded, setIsExpanded] = React$2.useState(false);
+    const [isOverflowingWhenNotExpanded, setIsOverflowingWhenNotExpanded] = React$2.useState(false);
+    const tdRef = React$2.useRef(null);
+    useResizeObserver(tdRef, ({ target }) => {
+      if (!isExpanded) {
+        if (target) {
+          const contentElement = target.getElementsByTagName("p")[0];
+          if (contentElement) {
+            setIsOverflowingWhenNotExpanded(
+              contentElement.scrollHeight > contentElement.clientHeight || contentElement.scrollWidth > contentElement.clientWidth
+            );
+          }
+        }
+      }
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "td",
+      {
+        ...props,
+        className: `ExpandableTableData ${props.className ? props.className : ""}`,
+        "aria-expanded": isExpanded,
+        ref: tdRef,
+        children: [
+          isOverflowingWhenNotExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ExpandCollapseButton,
+            {
+              isExpanded,
+              className: "ExpandableTableData__expandButton",
+              onClick: () => setIsExpanded(!isExpanded)
+            }
+          ),
+          props.children
+        ]
+      }
+    );
+  }
+  function CellRenderer(cell) {
+    var _a3, _b2, _c2;
+    const getWrapInExpandableTd = (_a3 = cell.getContext().table.options.meta) == null ? void 0 : _a3.getWrapInExpandableTd;
+    const wrapInExpandableTd = getWrapInExpandableTd && getWrapInExpandableTd(cell);
+    const TableDataCellElement = wrapInExpandableTd ? ExpandableTableDataCell : "td";
+    const renderPlaceholderData = (_b2 = cell.getContext().table.options.meta) == null ? void 0 : _b2.renderPlaceholderData;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TableDataCellElement,
+      {
+        style: {
+          width: `calc(var(${getColumnSizeCssVariable(cell.column.id)}) * 1px)`,
+          textAlign: (_c2 = cell.column.columnDef.meta) == null ? void 0 : _c2.textAlign
+        },
+        children: renderPlaceholderData ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { width: "80%", height: "20px" }) }) : flexRender(cell.column.columnDef.cell, cell.getContext())
+      },
+      cell.id
+    );
+  }
+  function TableBody(props) {
+    const { table: table2 } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: table2.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: row.getVisibleCells().map(CellRenderer) }, row.id)) });
+  }
+  const MemoizedTableBody = React$2.memo(TableBody, (prev2, next2) => {
+    return prev2.table.options.data === next2.table.options.data;
+  });
+  function StyledTanStackTable(props) {
+    const { table: table2, styledTableContainerProps, fullWidth = true } = props;
+    const columnSizeVars = React$2.useMemo(() => {
+      const headers = table2.getFlatHeaders();
+      const colSizes = {};
+      for (let i2 = 0; i2 < headers.length; i2++) {
+        const header = headers[i2];
+        colSizes[getHeaderSizeCssVariable(header.id)] = header.getSize();
+        colSizes[getColumnSizeCssVariable(header.column.id)] = header.column.getSize();
+      }
+      return colSizes;
+    }, [table2.getState().columnSizingInfo, table2.getState().columnSizing]);
+    const tableWidth = fullWidth ? "100%" : table2.getTotalSize();
+    const TableBodyElement = table2.getState().columnSizingInfo.isResizingColumn ? MemoizedTableBody : TableBody;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTableContainer, { ...styledTableContainerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { style: { ...columnSizeVars, width: tableWidth }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: table2.getHeaderGroups().map((headerGroup) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "th",
+          {
+            colSpan: header.colSpan,
+            style: {
+              width: `calc(var(${getHeaderSizeCssVariable(
+                header.id
+              )}) * 1px)`
+            },
+            children: [
+              header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              ),
+              header.column.getCanResize() && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+                  onMouseDown: header.getResizeHandler(),
+                  onTouchStart: header.getResizeHandler()
+                }
+              )
+            ]
+          },
+          header.id
+        )) }, headerGroup.id);
+      }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableBodyElement, { table: table2 })
+    ] }) });
+  }
   const columnHelper$3 = createColumnHelper();
   function SynapseTable(props) {
     var _a3, _b2, _c2, _d2;
@@ -114965,14 +115267,16 @@ ${e2.message}`);
       ]
     );
     const columnVisibility = React$2.useMemo(
-      () => ((data == null ? void 0 : data.selectColumns) ?? []).reduce((prev2, curr) => {
+      () => selectColumns.reduce((prev2, curr) => {
         return {
           ...prev2,
           [curr.name]: columnsToShowInTable.includes(curr.name)
         };
       }, prependColumnVisibility),
-      [columnsToShowInTable, data == null ? void 0 : data.selectColumns, prependColumnVisibility]
+      [columnsToShowInTable, selectColumns, prependColumnVisibility]
     );
+    const { dataHasBeenPrefetched } = usePrefetchTableData();
+    const renderTableDataPlaceholder = !dataHasBeenPrefetched;
     const table2 = useReactTable({
       data: ((_c2 = data == null ? void 0 : data.queryResult) == null ? void 0 : _c2.queryResults.rows) ?? [],
       columns: columns2,
@@ -114989,10 +115293,19 @@ ${e2.message}`);
       meta: {
         // make the rowEntityIDColumnIndex available to all cell renderers
         rowEntityIDColumnIndex,
-        rowEntityVersionColumnIndex
+        rowEntityVersionColumnIndex,
+        renderPlaceholderData: renderTableDataPlaceholder,
+        getWrapInExpandableTd: (cell) => {
+          const selectColumn = selectColumns.find(
+            (cm) => cm.name === cell.column.id
+          );
+          return Boolean(
+            selectColumn && /* JSON handles its own overflow*/
+            selectColumn.columnType !== ColumnTypeEnum.JSON
+          );
+        }
       }
     });
-    const { dataHasBeenPrefetched } = usePrefetchTableData();
     if (!data && isLoadingNewBundle) {
       return loadingScreen;
     } else if (!data) {
@@ -115013,59 +115326,15 @@ ${e2.message}`);
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
+        StyledTanStackTable,
         {
-          className: "SynapseTable SRC-overflowAuto",
-          "data-testid": "SynapseTable",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { style: { width: table2.getTotalSize() }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: table2.getHeaderGroups().map((headerGroup) => {
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "th",
-                {
-                  colSpan: header.colSpan,
-                  style: { width: header.getSize() },
-                  children: [
-                    header.isPlaceholder ? null : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    ),
-                    header.column.getCanResize() && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
-                        onMouseDown: header.getResizeHandler(),
-                        onTouchStart: header.getResizeHandler()
-                      }
-                    )
-                  ]
-                },
-                header.id
-              )) }, headerGroup.id);
-            }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: table2.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: row.getVisibleCells().map((cell) => {
-              var _a4;
-              const selectColumn = selectColumns.find(
-                (cm) => cm.name === cell.column.id
-              );
-              const shouldWrapInExpandable = selectColumn && selectColumn.columnType !== ColumnTypeEnum.JSON;
-              const TableDataCellElement = shouldWrapInExpandable ? ExpandableTableDataCell : "td";
-              const renderPlaceholder = !dataHasBeenPrefetched;
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                TableDataCellElement,
-                {
-                  style: {
-                    width: cell.column.getSize(),
-                    textAlign: (_a4 = cell.column.columnDef.meta) == null ? void 0 : _a4.textAlign
-                  },
-                  children: renderPlaceholder ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { width: "80%", height: "20px" }) }) : flexRender(
-                    cell.column.columnDef.cell,
-                    cell.getContext()
-                  )
-                },
-                cell.id
-              );
-            }) }, row.id)) })
-          ] })
+          styledTableContainerProps: {
+            className: "SynapseTable",
+            ["data-testid"]: "SynapseTable",
+            density: "default"
+          },
+          table: table2,
+          fullWidth: false
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2, textAlign: "right" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TablePagination, {}) })
@@ -115981,6 +116250,952 @@ ${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);
+        }) })
+      ] }),
+      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.";
+  const EMPTY_ARRAY$2 = [];
+  function useUpdateAcl(options2 = {}) {
+    const {
+      initialResourceAccessList = EMPTY_ARRAY$2,
+      onChange = noop$9,
+      onError = noop$9
+    } = options2;
+    const [isDirty2, setIsDirty] = React$2.useState(false);
+    const [resourceAccessList, setResourceAccessList] = React$2.useState(initialResourceAccessList);
+    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({ initialResourceAccessList: originalResourceAccess });
+    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 +117215,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 +117238,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 +118523,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 +124445,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() })
     ] }) });
@@ -124301,13 +125505,13 @@ query = syn.tableQuery("${clientSql}")${"\n"}query.asDataFrame()`
                 }
               ) }, requester.userId))
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: item.accessRequirementReviewerIds.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(UserOrTeamBadge, { principalId: ACT_TEAM_ID }) : item.accessRequirementReviewerIds.map((reviewerId2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stack$6, { gap: 1, children: item.accessRequirementReviewerIds.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(UserOrTeamBadge, { principalId: ACT_TEAM_ID }) : item.accessRequirementReviewerIds.map((reviewerId2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               UserOrTeamBadge,
               {
                 principalId: reviewerId2
               },
               reviewerId2
-            )) }),
+            )) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: formatDate(dayjs(item.createdOn)) })
           ] }, item.id);
         }) })
@@ -153147,72 +154351,6 @@ query = syn.tableQuery("${clientSql}")${"\n"}query.asDataFrame()`
     });
     return { table: table2, isLoading, hasNextPage: hasNextPage2, fetchNextPage };
   }
-  const StyledTableContainer = styled(Box)(({ theme: theme3, density = "default" }) => ({
-    overflow: "auto",
-    paddingLeft: "2px",
-    th: {
-      height: "38px",
-      backgroundColor: theme3.palette.grey[200]
-    },
-    ["th:first-of-type"]: {
-      paddingLeft: "10px"
-    },
-    ["td:first-of-type"]: {
-      paddingLeft: "10px"
-    },
-    ["tr:nth-of-type(2n)"]: {
-      backgroundColor: theme3.palette.grey[100]
-    },
-    ["th,td"]: {
-      paddingLeft: theme3.spacing(density === "compact" ? 0 : 1),
-      paddingRight: theme3.spacing(density === "compact" ? 0 : 1)
-    },
-    td: {
-      paddingTop: theme3.spacing(density === "compact" ? 0 : 1),
-      paddingBottom: theme3.spacing(density === "compact" ? 0 : 1)
-    }
-  }));
-  function StyledTanStackTable(props) {
-    const { table: table2, styledTableContainerProps } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTableContainer, { ...styledTableContainerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: table2.getHeaderGroups().map((headerGroup) => {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "th",
-          {
-            colSpan: header.colSpan,
-            style: { width: header.getSize() },
-            children: [
-              header.isPlaceholder ? null : flexRender(
-                header.column.columnDef.header,
-                header.getContext()
-              ),
-              header.column.getCanResize() && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
-                  onMouseDown: header.getResizeHandler(),
-                  onTouchStart: header.getResizeHandler()
-                }
-              )
-            ]
-          },
-          header.id
-        )) }, headerGroup.id);
-      }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: table2.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: row.getVisibleCells().map((cell) => {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "td",
-          {
-            style: {
-              width: cell.column.getSize()
-            },
-            children: flexRender(cell.column.columnDef.cell, cell.getContext())
-          },
-          cell.id
-        );
-      }) }, row.id)) })
-    ] }) });
-  }
   function AccessRequirementTable(props) {
     const {
       nameOrID,
@@ -153912,7 +155050,7 @@ query = syn.tableQuery("${clientSql}")${"\n"}query.asDataFrame()`
       parseInt(submission == null ? void 0 : submission.accessRequirementId),
       { enabled: !!submission }
     );
-    const { data: acl } = useGetAccessRequirementACL(
+    const { data: acl, isLoading: isLoadingACL } = useGetAccessRequirementACL(
       submission == null ? void 0 : submission.accessRequirementId,
       { enabled: !!submission, throwOnError: true }
     );
@@ -153923,6 +155061,7 @@ query = syn.tableQuery("${clientSql}")${"\n"}query.asDataFrame()`
         newState: SubmissionState.APPROVED
       });
     }
+    const reviewerIds = acl == null ? void 0 : acl.resourceAccess.filter((ra) => ra.accessType.includes(ACCESS_TYPE.REVIEW_SUBMISSIONS)).map((ra) => ra.principalId);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "SubmissionPage", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ApproveConfirmationModal,
@@ -153982,15 +155121,13 @@ query = syn.tableQuery("${clientSql}")${"\n"}query.asDataFrame()`
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", children: (accessRequirement == null ? void 0 : accessRequirement.name) ?? /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { width: 100 }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "dataFieldKey", children: "Assigned Reviewer" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", children: acl !== void 0 ? acl !== null ? acl.resourceAccess.map((ra) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            UserOrTeamBadge,
-            {
-              principalId: ra.principalId
-            },
-            ra.principalId
-          );
-        }) : /* @__PURE__ */ jsxRuntimeExports.jsx(UserOrTeamBadge, { principalId: ACT_TEAM_ID }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { width: 100 }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "smallText1", children: [
+          isLoadingACL && /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { width: 100 }),
+          !isLoadingACL && !isEmpty$1(reviewerIds) && reviewerIds.map((id2) => {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(UserOrTeamBadge, { principalId: id2 }, id2);
+          }),
+          !isLoadingACL && isEmpty$1(reviewerIds) && /* @__PURE__ */ jsxRuntimeExports.jsx(UserOrTeamBadge, { principalId: ACT_TEAM_ID })
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "dataFieldKey", children: "Conditions" }),
         accessRequirement ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "smallText1", component: "div", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { children: [
@@ -161608,7 +162745,7 @@ dl_list_file_entities = syn.get_download_list()`;
       (selectColumn) => selectColumn.name == "N_UNIQUE_USERS"
     );
     const egressSizeColIndex = headers == null ? void 0 : headers.findIndex(
-      (selectColumn) => selectColumn.name == "TOTAL_DATA_SIZE_GIB"
+      (selectColumn) => selectColumn.name == "ESTIMATED_PROJECT_SIZE_IN_GIB"
     );
     if (!rowSet || rowSet.rows.length == 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
@@ -161626,7 +162763,7 @@ dl_list_file_entities = syn.get_download_list()`;
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", sx: { ml: "15px" }, children: "Rank" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "Project" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "Data Downloaded" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "Project Data" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "Unique Teams" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Box, {})
           ]
@@ -162047,38 +163184,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 +163205,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 +163318,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 +163643,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 +163675,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(
@@ -163216,19 +164313,101 @@ dl_list_file_entities = syn.get_download_list()`;
     width: "16px",
     transition: "fill 1s ease-in-out"
   }));
+  const searchValues = [
+    "Alzheimer's Disease",
+    "Neurofibromatosis mouse models",
+    "Cancer",
+    "UK Biobank",
+    "Single-cell analysis of breast cancer",
+    "ROSMAP Religious Orders Study and Memory and Aging Project",
+    "Retinal regeneration studies",
+    "Machine Learning datasets"
+  ];
+  const projectKeyValue = {
+    key: "node_type",
+    value: "project",
+    not: false
+  };
+  const SynapseSearchChips = ({ gotoPlace }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: searchValues.map((value) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Chip,
+        {
+          label: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              variant: "body1",
+              sx: {
+                fontSize: "18px",
+                fontWeight: 400,
+                p: "10px"
+              },
+              children: value
+            }
+          ),
+          onClick: () => {
+            const searchQuery = {
+              queryTerm: [value],
+              booleanQuery: value == "Cancer" ? [projectKeyValue] : void 0,
+              // match existing facet options in SWC search
+              facetOptions: [
+                {
+                  name: SearchFieldName.ENTITY_TYPE,
+                  maxResultCount: 300,
+                  sortType: SearchFacetSort.COUNT
+                },
+                {
+                  name: SearchFieldName.CONSORTIUM,
+                  maxResultCount: 300,
+                  sortType: SearchFacetSort.COUNT
+                },
+                {
+                  name: SearchFieldName.MODIFIED_ON,
+                  maxResultCount: 300,
+                  sortType: SearchFacetSort.COUNT
+                },
+                {
+                  name: SearchFieldName.MODIFIED_BY,
+                  maxResultCount: 300,
+                  sortType: SearchFacetSort.COUNT
+                },
+                {
+                  name: SearchFieldName.CREATED_ON,
+                  maxResultCount: 300,
+                  sortType: SearchFacetSort.COUNT
+                },
+                {
+                  name: SearchFieldName.TISSUE,
+                  maxResultCount: 300,
+                  sortType: SearchFacetSort.COUNT
+                },
+                {
+                  name: SearchFieldName.CREATED_BY,
+                  maxResultCount: 300,
+                  sortType: SearchFacetSort.COUNT
+                }
+              ],
+              start: 0,
+              size: 30
+            };
+            gotoPlace(`/Search:${JSON.stringify(searchQuery)}`);
+          },
+          variant: "outlined",
+          sx: {
+            color: "secondary.600",
+            backgroundColor: "secondary.100",
+            borderWidth: "0px",
+            "&:hover": { backgroundColor: "#B5D3CE !important" }
+          }
+        },
+        value
+      );
+    }) });
+  };
   const synapseInActionTable = "syn61670075";
   const past30DaysDownloadMetricsTable = "syn61597084";
   const generalStatsMetricsTable = "syn61588163";
   const featuredDatasetsTable = "syn61609402";
-  const popularSearches = [
-    "Alzheimer's Disease",
-    "Parkinson",
-    "Neurofibromatosis",
-    "HTAN",
-    "ukb-ppp",
-    "ROSMAP",
-    "GENIE"
-  ];
   const darkTextColor = "#22252A";
   const homepageBodyText = {
     fontSize: "24px",
@@ -163409,120 +164588,102 @@ dl_list_file_entities = syn.get_download_list()`;
             mt: "30px",
             flexWrap: "wrap"
           },
-          children: popularSearches.map((value) => {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Chip,
-              {
-                label: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Typography,
-                  {
-                    variant: "body1",
-                    sx: {
-                      fontSize: "18px",
-                      fontWeight: 400,
-                      p: "10px"
-                    },
-                    children: value
-                  }
-                ),
-                onClick: () => gotoPlace(`/Search:${encodeURIComponent(value)}`),
-                variant: "outlined",
-                sx: {
-                  color: "secondary.600",
-                  backgroundColor: "secondary.100",
-                  borderWidth: "0px",
-                  "&:hover": { backgroundColor: "#B5D3CE !important" }
-                }
-              },
-              value
-            );
-          })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(SynapseSearchChips, { gotoPlace })
         }
       ),
-      /* @__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 +164730,7 @@ dl_list_file_entities = syn.get_download_list()`;
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
             Box,
             {
               sx: {
@@ -163585,62 +164746,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(
@@ -164194,7 +165364,7 @@ dl_list_file_entities = syn.get_download_list()`;
                 {
                   className: "synapseIcon",
                   rel: "noopener noreferrer",
-                  onClick: () => gotoPlace("/Home:0"),
+                  onClick: () => gotoPlace("/Home:x"),
                   "aria-label": "Synapse Home",
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(SynapseIconWhite, {})
                 }
@@ -176751,294 +177921,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 +177953,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 +178030,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 })
@@ -178704,7 +179590,9 @@ dl_list_file_entities = syn.get_download_list()`;
   }(React$2.Component);
   a.defaultProps = { disabled: false, offColor: "#888", onColor: "#080", offHandleColor: "#fff", onHandleColor: "#fff", uncheckedIcon: n, checkedIcon: o, boxShadow: null, activeBoxShadow: "0 0 2px 3px #3bf", height: 28, width: 56 };
   const experimentalModeText = "This mode gives you early access to features that are still in development. Please note that we do not guarantee an absence of errors, and that the data created using these features may be lost during product upgrade.";
-  const ExperimentalMode = () => {
+  const ExperimentalMode = ({
+    onExperimentalModeToggle
+  }) => {
     const [isExperimentalModeOn, setIsExperimentalModeOn] = React$2.useState(false);
     const cookies2 = new UniversalCookies();
     let mounted = true;
@@ -178722,10 +179610,16 @@ dl_list_file_entities = syn.get_download_list()`;
     const createExperimentalModeCookie = () => {
       cookies2.set(EXPERIMENTAL_MODE_COOKIE, { path: "/" });
       setIsExperimentalModeOn(true);
+      if (onExperimentalModeToggle) {
+        onExperimentalModeToggle(true);
+      }
     };
     const deleteExperimentalModeCookie = () => {
       document.cookie = `${EXPERIMENTAL_MODE_COOKIE}= ; expires = Thu, 01 Jan 1970 00:00:00 GMT`;
       setIsExperimentalModeOn(false);
+      if (onExperimentalModeToggle) {
+        onExperimentalModeToggle(false);
+      }
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "Experimental Mode" }),
@@ -178758,7 +179652,7 @@ dl_list_file_entities = syn.get_download_list()`;
     srcVersion,
     repoVersion,
     gotoPlace,
-    reportViolationCallback
+    onExperimentalModeToggle
   }) => {
     const { accessToken } = useSynapseContext();
     const registrationUrl = useOneSageURL("/register1");
@@ -178901,10 +179795,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" }
                               }
                             ]
@@ -179099,7 +179995,7 @@ dl_list_file_entities = syn.get_download_list()`;
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ExperimentalMode, {})
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ExperimentalMode, { onExperimentalModeToggle })
           ]
         }
       )
@@ -179304,7 +180200,7 @@ dl_list_file_entities = syn.get_download_list()`;
       )
     ] });
   };
-  const version = "3.3.6";
+  const version = "3.3.8";
   const SynapseEnums = {
     BackendDestinationEnum
   };
@@ -179388,7 +180284,8 @@ dl_list_file_entities = syn.get_download_list()`;
     CreateOrUpdateAccessRequirementWizard,
     GoogleAnalytics,
     CookiesNotification,
-    getCurrentCookiePreferences
+    getCurrentCookiePreferences,
+    EntityAclEditorModal
   };
   const SynapseReactClientVersion = version;
   exports2.HttpClient = HttpClient;